Obrazek na środku ekranu

Question

Witam

Jak ustawić obrazek na środku ekranu używając CSS ?

Answer 1

Może użyj text-align: center?

Comments

text-align: center; to mi wyśrodkuje tylko tekst a nie cały obrazek.

Answer 2

Możesz użyć flex blox, więcej na ten temat tutaj: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

Tzn. chodzi mi oto aby ustawić ten obrazek na środku i niezależnie od tego jaką kto bedzie miał rozdzielczość monitora albo czy będzie sobie zmniejszał bądź zwiększał za pomocą ctr+ rozdzielczość w przeglądarce żeby ten obrazek był cały czas na środku.Więc jak by to najlepiej zrobić ?

Answer 4

text-align: center;

Obrazek zachowuje się jak text więc tymi samymi komendami się go ustawia :)

A leżeli hodzi o ustawienie w pionie i poziomie to możesz zrobić:

img {

margin: calc(50vh - "wysokość obrazka")  auto;

 display: block;

}

Comments

Wpisałem tą komendę text-align: center; ale to nie działa.

---

wpisałeś ją dla elementu w którym jest to zdjęcie?

Upewnij się, jak nie działa poprosił bym kod :)

Answer 5

Wklejam to tutaj :

.home-portfolio-showcase {
    position: relative;
    padding: 0px;
    text-align: center;
    margin-left:160px; // działa
    text-align:center;

Jak wpisuje margin-left to przesówa mi się o te 160 px w prawo ale co z tego jak na przykład ktoś zminiejszy bądź większy rodzielczość to już się nie wyświetla na środku tylko przesówa się na boki.

 

A na text-align wogóle nie reaguje.

 

Comments

Wincyj kodu.

---

A może margin-left: center?

---

Nie działa margin-left:center

---

Mam dać więcej kodu CSS czy PHP i HTML ?

---

Pokaż więcej kodu bo z tego to nie wiadomo czy obrazek jest w <img> czy tłem jakiegoś diva. Poza tym style rodzica też mogą mieć wpływ na pozycję obrazka.

---

html i css, php nie potrzebny tutaj.

Answer 6

Kod CSS :

/*Homepage Portfolio Section--------------------------------------------------------------------------*/ 
.portfolio-section {
	/*background-color: #373941;*/
	background-image: radial-gradient(blue -40%, gold 180%);
    margin: 0;
    padding: 70px 0 20px;
	padding-left: 0px;
    width: 100%;
	
	  

}


.home-portfolio-area{
	margin-bottom: 50px;

}
.home-portfolio-showcase {
    position: relative;
    padding: 0px;
	text-align: center;
	margin-left: center;
	
	
	
}
.home-portfolio-showcase-media {
    position: relative;
	
}
.home-portfolio-showcase-media img {
    width: 100%;
	
	
      

	
}
.home-portfolio-showcase:hover .home-portfolio-showcase-title a {
    text-decoration: underline;
	
	       

}
.home-portfolio-showcase-overlay {
	
background-image:url('https://i.ytimg.com/vi/Yh5qeK-fmQE/maxresdefault.jpg');
  
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s ease;
	position: absolute;
    top: 0;
    left: auto;
    border-radius: 40px;

	
    text-align: center;
    width: 600px;
    height: 100%;
	
}
.home-portfolio-showcase-overlay-inner {
    left: 0;
	position: absolute;
	top: 50%;
	width: 100%;
	padding: 1px;
	margin-top:-180px;
	border-top: 40px;
	
	


	
}
.home-portfolio-showcase .home-portfolio-showcase-detail {
    margin-top: 20px;
    text-align: center;
    
    width: 100%;
	        

	
}
.home-portfolio-showcase .home-portfolio-showcase-detail a {
    display: inline-block;
    margin-left: 0px;
    opacity: 1;
	text-decoration: none;
	        

	
}
.home-portfolio-showcase .home-portfolio-showcase-detail a:hover {
    opacity: 1;
	      

	
}
.home-portfolio-showcase .home-portfolio-showcase-detail h4 {
    padding: 0 0 15px;
	
    text-align: center;
    transition: all 180ms ease-in-out 0s;
    font-family:'Roboto';
	font-weight:500;
	line-height: 20px;
	color: #ffffff;
	font-size: 18px;
	border-bottom: 1px solid #ffffff;
	
}
.home-portfolio-showcase .home-portfolio-showcase-detail p {
    color: black;
    font-family:'Roboto';
	font-weight:400;
    font-size: 12px;
    line-height: 20px;
    margin: 0 0 15px;
    padding: 0;
    text-align: center;
    transition: all 180ms ease-in-out 0s;
	     

	
}
.portfolio-btn {
    display: block;
    margin: 0 0 20px;
    text-align: center;
	        

	
}
.portfolio-btn a {
	background-color: #32343c;
    color: #FFFFFF;
    display: inline-block;
    font-family:'Roboto';
	font-weight:400;
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 0;
    padding: 7px 15px;
    text-align: center;
    transition: all 0.4s ease 0s;
	
	
}
.home-portfolio-showcase:hover .home-portfolio-showcase-overlay {
    visibility: visible;
    opacity: 1;
	
}
.home-portfolio-showcase-fade {
    opacity: 0.2;
}
.home-portfolio-showcase-fade:hover .home-portfolio-showcase-overlay {
    display: none !important;
	
}
.proejct-btn {
    border-radius: 0;
    margin-top: 0;
    padding: 0;
    text-align: center;
    transition: all 0.4s ease 0s;
	margin: 0 0 50px;
	 

	
	
}
.proejct-btn a {
	background-color: rgba(0, 0, 0, 0);
    transition: all 0.4s ease 0s;
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    text-shadow: 0 1px 1px #18191b;
	display: inline-block;
    font-family:'Roboto';
	font-weight:300;
    font-size: 18px;
    line-height: 22px;
    margin: 0 0 0px;
    padding: 13px 30px;
    text-align: right;
	
          

    vertical-align: middle;
}
.proejct-btn a:hover {
	background-color: #00c2a9;
    border: 2px solid #00c2a9;
    text-shadow: 0 1px 1px #4a4c56;
	   

}

A tutaj reszta kodu :

<?php if($current_options['portfolio_image_one']) { ?>
			<div class="col-md-3 col-md-6 home-portfolio-area">
				<div class="home-portfolio-showcase">
					<div class="home-portfolio-showcase-media">
					
					
						<img class="img-responsive home-portfolio-img" alt="Sleek &amp; Beautiful" src="<?php echo esc_url($current_options['portfolio_image_one']); ?>">
					
						<div class="home-portfolio-showcase-overlay">
							<div class="home-portfolio-showcase-overlay-inner">
								<div class="home-portfolio-showcase-detail">
								<a href="http://localhost/wordpress/podstrona/>
	<img style="border-radius:40px;text-align:center;" src="" alt="Nie można wyświetlić obrazka" />
</a>
								<div class="home-blog-btn"><a href="http://localhost/wordpress/podstrona/">Przekonaj się sam</a></div>
								
									<?php if($current_options['portfolio_title_one']){ ?>
									<h4><?php echo esc_html($current_options['portfolio_title_one']); ?></h4>
									<?php } ?>
									<?php if($current_options['portfolio_description_one']){ ?>
									<p><?php echo esc_html($current_options['portfolio_description_one']);?></p>
									<?php } ?>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

 

Answer 7

Bardzo proszę o pomoc.

Answer 8

Odświeżam temat.

Answer 9

position: relative;
left: 50%;
transform: translateX(-50%);

Ewentualnie zmień position na absolute.