Wyśrodkuj obraz poziomo w div
To prawdopodobnie głupie pytanie, ale ponieważ zwykłe sposoby wyrównywania środka obrazu nie działają, pomyślałem, że zapytam. Jak wyśrodkować (poziomo)obraz wewnątrz kontenera div?
Oto HTML i CSS. Dodałem również CSS dla innych elementów miniatury. Biegnie w porządku malejącym, więc najwyższym elementem jest pojemnik wszystkiego, a najniższym jest wewnątrz wszystko.
#thumbnailwrapper {
color: #2A2A2A;
margin-right: 5px;
border-radius: 0.2em;
margin-bottom: 5px;
background-color: #E9F7FE;
padding: 5px;
border: thin solid #DADADA;
font-size: 15px
}
#artiststhumbnail {
width: 120px;
height: 108px;
overflow: hidden;
border: thin solid #DADADA;
background-color: white;
}
#artiststhumbnail:hover {
left: 50px
}
<!--link here-->
<a href="NotByDesign">
<div id="thumbnailwrapper">
<a href="NotByDesign">
<!--name here-->
<b>Not By Design</b>
<br>
<div id="artiststhumbnail">
<a href="NotByDesign">
<!--image here-->
<img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
</a>
</div>
<div id="genre">Punk</div>
</div>
Ok, dodałem znaczniki bez PHP w więc powinno być łatwiejsze do zobaczenia. Żadne rozwiązanie nie sprawdza się w praktyce. Tekst u góry i u dołu nie może być wyśrodkowany, a obraz powinien być wyśrodkowany wewnątrz kontenera div. Kontener ma ukryte przepełnienie, więc chcę zobaczyć środek obrazu, ponieważ zwykle jest tam ostrość.
22 answers
#artiststhumbnail a img {
display:block;
margin:auto;
}
Oto moje rozwiązanie w: http://jsfiddle.net/marvo/3k3CC/2/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-11-10 14:02:07
CSS flexbox można to zrobić z justify-content: center
na elemencie nadrzędnym obrazu. Aby zachować proporcje obrazu, Dodaj do niego align-self: flex-start;
.
HTML
<div class="image-container">
<img src="http://placehold.it/100x100" />
</div>
CSS
.image-container {
display: flex;
justify-content: center;
}
Wyjście:
body {
background: lightgray;
}
.image-container {
width: 200px;
display: flex;
justify-content: center;
margin: 10px;
padding: 10px;
/* Material design properties */
background: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
width: 500px;
align-self: flex-start; /* to preserve image aspect ratio */
}
.image-3 {
width: 300px;
align-self: flex-start; /* to preserve image aspect ratio */
}
<div class="image-container">
<img src="http://placehold.it/100x100" />
</div>
<div class="image-container image-2">
<img src="http://placehold.it/100x100/333" />
</div>
<div class="image-container image-3">
<img src="http://placehold.it/100x100/666" />
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-05-05 01:35:03
Właśnie znalazłem to rozwiązanie poniżej na stronie CSS W3 i odpowiedziało na mój problem.
img {
display: block;
margin-left: auto;
margin-right: auto;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-20 23:10:55
To też by to zrobiło
#imagewrapper {
text-align:center;
}
#imagewrapper img {
display:inline-block;
margin:0 5px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-27 20:44:24
Najlepszą rzeczą, jaką znalazłem (która wydaje się działać we wszystkich przeglądarkach) do centrowania obrazu lub dowolnego elementu w poziomie jest utworzenie klasy CSS i włączenie następujących parametrów:
CSS
.center {
position: relative; /* where the next element will be automatically positioned */
display: inline-block; /* causes element width to shrink to fit content */
left: 50%; /* moves left side of image/element to center of parent element */
transform: translate(-50%); /* centers image/element on "left: 50%" position */
}
Możesz następnie zastosować klasę CSS, którą utworzyłeś do swojego tagu w następujący sposób:
HTML
<img class="center" src="image.jpg" />
Możesz również wstawić CSS w swoim elemencie(elementach), wykonując następujące czynności:
<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />
...ale nie polecam pisania CSS inline bo wtedy musisz dokonać wielu zmian we wszystkich tagach za pomocą kodu CSS centrującego, jeśli kiedykolwiek chcesz zmienić styl.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-21 05:26:01
Oto co zrobiłem:
<div style="height: 600px">
<img src="assets/zzzzz.png" alt="Error" style="max-width: 100%;
max-height: 100%; display:block; margin:auto;" />
</div>
, który ograniczy wysokość obrazu do 600px i wyśrodkuje poziomo (lub zmieni rozmiar w dół, jeśli szerokość nadrzędna jest mniejsza) do kontenera nadrzędnego, zachowując proporcje.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-06-14 20:12:40
Zamierzam zaryzykować i powiedzieć, że oto, czego szukasz.
Uwaga, następujące, jak sądzę, zostały przypadkowo pominięte w pytaniu (patrz komentarz):
<div id="thumbnailwrapper"> <!-- <<< This opening element -->
<div id="artiststhumbnail">
...
Więc to czego potrzebujesz to:
#artiststhumbnail {
width:120px;
height:108px;
margin: 0 auto; /* <<< This line here. */
...
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-12 01:37:30
Dodaj to do CSS:
#artiststhumbnail a img {
display: block;
margin-left: auto;
margin-right: auto;
}
Po prostu odwołuję się do elementu potomnego, który w tym przypadku jest obrazem.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-10-18 13:52:07
Aby wyśrodkować obraz w poziomie, działa to:
<p style="text-align:center"><img src=""></p>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-06-14 20:08:40
Wyśrodkuj obrazek w div
/* standar */
div, .flexbox-div {
position: relative;
width: 100%;
height: 100px;
margin: 10px;
background-color: grey;
}
img {
border: 3px solid red;
width: 75px;
height: 75px;
}
/* || standar */
/* transform */
.transform {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
/* || transform */
/* flexbox margin */
.flexbox-div {
display: -webkit-flex;
display: flex;
background-color: lightgrey;
}
.margin-img {
margin: auto;
}
/* || flexbox margin */
/* flexbox justify align */
.flexbox-justify {
justify-content: center;
}
.align-item {
align-self: center;
}
/* || flexbox justify align */
<h4>Using transform </h4>
<div>
<img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>
<h4>Using flexbox margin</h4>
<div class="flexbox-div">
<img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>
<h4>Using flexbox justify align</h4>
<div class="flexbox-div flexbox-justify">
<img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-25 07:34:02
Próbowałem na kilka sposobów. Ale ten sposób działa idealnie dla mnie
<img src="~/images/btn.png" class="img-responsive" id="hide" style="display: block; margin-left: auto; margin-right: auto;" />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-01-20 02:44:16
Umieść równe piksele dla lewej i prawej strony:
<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-06-14 20:08:16
Responsywny sposób wyśrodkowania obrazu może wyglądać następująco:
.center {
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-02 22:09:52
Umieść zdjęcie wewnątrz newDiv
.
Ustaw szerokość elementu div
taką samą jak obrazka.
Zastosuj {[2] } do newDiv
.
To powinno wyśrodkować div
w pojemniku.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-22 07:44:18
Użyj pozycjonowania. To mi się udało... (Poziomo i pionowo wyśrodkowane)
Z powiększeniem do środka obrazu (obraz wypełnia div):
div{
display:block;
overflow:hidden;
width: 70px;
height: 70px;
position: relative;
}
div img{
min-width: 70px;
min-height: 70px;
max-width: 250%;
max-height: 250%;
top: -50%;
left: -50%;
bottom: -50%;
right: -50%;
position: absolute;
}
Bez powiększenia do środka obrazka (obrazek nie wypełnia ):
div{
display:block;
overflow:hidden;
width: 100px;
height: 100px;
position: relative;
}
div img{
width: 70px;
height: 70px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-24 08:42:41
Możesz wyrównać zawartość za pomocą flex box z minimalnym kodem
HTML
<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px">
</div>
CSS
.image-container{
width:100%;
background:green;
display:flex;
.image-container{
width:100%;
background:green;
display:flex;
justify-content: center;
align-items:center;
}
<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px">
</div>
Js fiddle link https://jsfiddle.net/7un6ku2m/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-19 12:57:40
Tak, Kod jak ten działa dobrze
<div>
<img>
</div>
Ale tylko dla przypomnienia u, styl dla obrazu
object-fit : *depend on u*
Więc końcowy kod będzie jak Przykład
<div style="border: 1px solid red;">
<img
src="./assets/images/truck-toy.jpg"
alt=""
srcset=""
style="
border-radius: 50%;
height: 7.5rem;
width: 7.5rem;
object-fit: contain;"
/>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-05-21 09:56:10
Jeśli musisz to zrobić w wierszu (na przykład przy użyciu pola wprowadzania),
oto szybki hack, który działał dla mnie: surround your (link obraz w tym przypadku)
w div
z style="text-align:center"
<div style="text-align:center">
<a title="Example Image: Google Logo" href="https://www.google.com/"
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>
<h6><strong>This text will also be centered </strong></h6>
</div> /* ends centering style */
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-11 20:21:55
.document {
align-items: center;
background-color: hsl(229, 57%, 11%);
border-radius: 5px;
display: flex;
height: 40px;
width: 40px;
}
.document img {
display: block;
margin: auto;
}
<div class="document">
<img src="./images/icon-document.svg" alt="icon-document" />
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-21 05:02:40
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
/*-------------------important for fluid images---\/--*/
overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
overflow-y: scroll;
margin-left:0px;
margin-top:0px;
/*-------------------important for fluid images---/\--*/
}
.thirddiv{
float:left;
width:100vw;
height:100vh;
margin:0px;
background:olive;
}
.thirdclassclassone{
float:left; /*important*/
background:grey;
width:80vw;
height:80vh; /*match with img height bellow*/
margin-left:10vw; /* 100vw minus "width"/2 */
margin-right:10vw; /* 100vw minus "width"/2 */
margin-top:10vh;
}
.thirdclassclassone img{
position:relative; /*important*/
display: block; /*important*/
margin-left: auto; /*very important*/
margin-right: auto; /*very important*/
height:80vh; /*match with parent div above*/
/*--------------------------------
margin-top:5vh;
margin-bottom:5vh;
---------------------------------*/
/*---------------------set margins to match total height of parent di----------------------------------------*/
}
</style>
</head>
<body>
<div class="thirddiv">
<div class="thirdclassclassone">
<img src="ireland.png">
</div>
</body>
</html>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-17 15:59:02
##Both Vertically and Horizontally center of the Page
.box{
width: 300px;
height: 300px;
background-color: #232532;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-15 11:49:20
Styl.css
img#center-img{
display: block;
margin: auto;
}
Html
<html>
<body>
<div>
<img src='pic.png' id='center-img'>
</div>
</body>
</html>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-02-12 14:28:34