Wyśrodkuj obraz używając text-align center?
Czy właściwość text-align: center;
jest dobrym sposobem na wyśrodkowanie obrazu za pomocą CSS?
img {
text-align: center;
}
22 answers
To nie będzie działać, ponieważ właściwość text-align
ma zastosowanie do kontenerów blokowych, a nie elementów inline, a img
jest elementem inline. Zobacz spec W3C .
Użyj tego zamiast:
img.center {
display: block;
margin: 0 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
2015-09-25 00:10:49
To nie zawsze działa... jeśli nie, spróbuj:
img {
display: block;
margin: 0 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
2011-08-14 06:24:16
Natknąłem się ten post i mi się udało:
img {
position: absolute;
top: 0; bottom:0; left: 0; right:0;
margin: auto;
}
(wyrównanie pionowe i poziome)
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
2014-01-07 09:18:45
Innym sposobem zrobienia byłoby wyśrodkowanie załączonego akapitu:
<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
2013-01-20 12:51:29
Możesz zrobić:
<center><img src="..." /></center>
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
2015-08-10 09:01:34
Właściwie jedynym problemem z Twoim kodem jest to, że atrybut text-align
odnosi się do tekstu (tak, obrazy liczą się jako tekst) wewnątrz znacznika. Warto umieścić znacznik span
wokół obrazu i ustawić jego styl na text-align: center
, tak:
span.centerImage {
text-align: center;
}
<span class="centerImage"><img src="http://placehold.it/60/60" /></span>
Obraz zostanie wyśrodkowany. W odpowiedzi na twoje pytanie, jest to najprostszy i najbardziej niezawodny sposób na wyśrodkowanie obrazów, o ile pamiętasz, aby zastosować regułę do obrazów zawierających span
(lub 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-05-22 20:03:17
Tylko wtedy, gdy potrzebujesz obsługi starożytnych przeglądarek IE.
Nowoczesne podejście polega na wykonaniu margin: 0 auto
w CSS.
Przykład tutaj: http://jsfiddle.net/bKRMY/
HTML:
<p>Hello the following image is centered</p>
<p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p>
<p>Did it work?</p>
CSS:
p.pic {
width: 48px;
margin: 0 auto;
}
Jedynym problemem jest to, że szerokość akapitu musi być taka sama jak szerokość obrazu . Jeśli nie umieścisz szerokości akapitu, nie zadziała, ponieważ założy 100% i twój obraz zostanie wyrównany w lewo, chyba że użyjesz text-align:center
.
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
2011-08-14 06:42:08
Istnieją trzy metody centrowania elementu, które mogę zasugerować.
-
Korzystanie z własności
text-align
.parent { text-align: center; }
<div class="parent"> <img src="https://placehold.it/60/60" /> </div>
-
Korzystanie z własności
margin
img { display: block; margin: 0 auto; }
<img src="https://placehold.it/60/60" />
-
Korzystanie z własności
position
img { display: block; position: relative; left: -50%; } .parent { position: absolute; left: 50%; }
<div class="parent"> <img src="https://placehold.it/60/60" /> </div>
Pierwsza i druga metoda działają tylko wtedy, gdy rodzic jest co najmniej tak szeroki jak obraz. Gdy obraz jest szerszy niż jego rodzic, obraz nie zostanie wyśrodkowany!!!
Ale: Trzecia metoda jest na to dobrym sposobem!
Oto przykład:
img {
display: block;
position: relative;
left: -50%;
}
.parent {
position: absolute;
left: 50%;
}
<div class="parent">
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" />
</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-05-22 20:25:26
Jeśli używasz klasy z obrazkiem, wykonasz następujące czynności
class{
display: block;
margin: 0 auto;
}
Jeśli jest to tylko obraz w określonym calss, który chcesz wyśrodkować, wykonaj następujące czynności
class img {
display: block;
margin: 0 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
2013-05-18 06:26:24
img{
display: block;
margin-right: auto;
margin-left: 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-03-15 22:22:41
Po prostu zmień parent align:)
Spróbuj tego na właściwości rodzica text-align:center
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
2013-11-09 22:35:29
Możesz użyć text-align: center
na rodzicu I zmienić img na display: inline-block
- > dlatego zachowuje się jak element tekstowy i będzie wyśrodkowany, jeśli rodzic ma szerokość!
img {
display: inline-block
}
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
2015-04-29 07:25:17
Na obrazie trzymającym kontener można użyć CSS3 flex box, aby idealnie wyśrodkować obraz wewnątrz, zarówno w pionie, jak i w poziomie. Załóżmy, że masz jako posiadacz obrazu: następnie jako css musisz użyć
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
I to sprawi, że cała twoja zawartość wewnątrz tego div będzie idealnie wyśrodkowana.
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-06 09:42:05
Użyłbym div do wyśrodkowania obrazu. Jak w:
<div align="center"><img src="your_image_source"/></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-03-14 11:15:44
Jeśli chcesz ustawić obrazek jako tło, mam rozwiązanie:
.image{
background-image: url(yourimage.jpg);
background-position: center;
}
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-09-28 12:28:31
Wyśrodkowanie obrazu bez tła zależy od tego, czy obraz ma być wyświetlany jako element wbudowany (zachowanie domyślne), czy jako element blokowy.
Case of inline
Jeśli chcesz zachować domyślne zachowanie właściwości display CSS obrazu, musisz zawinąć obraz w inny element bloku, do którego należy ustawić text-align: center;
Przypadek bloku
Jeśli chcesz uznać obraz za własny element blokowy, to text-align
właściwość nie robi sens, a zamiast tego powinieneś to zrobić:
IMG.display {
display: block;
margin-left: auto;
margin-right: auto;
}
Odpowiedź na twoje pytanie:
Tak i nie.Jest właściwością text-align: center; dobry sposób na wyśrodkowanie obrazu używając CSS?
- tak, jeśli obraz jest jedynym elementem wewnątrz jego opakowania.
- Nie, w przypadku, gdy masz inne elementy wewnątrz opakowania obrazu, ponieważ T wszystkie elementy potomne, które są rodzeństwem obrazu, odziedziczą właściwość
text-align
: i być może nie podoba Ci się ten efekt uboczny.
Referencje
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-11-02 09:27:06
Jeszcze jeden sposób na skalowanie-wyświetlanie:
img {
width: 60%; /* or required size of image. */
margin-left: 20% /* or scale it to move image. */
margin-right: 20% /* doesn't matters much if using left and width */
}
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
2015-06-26 09:21:00
Użyj tego do swojego img css
img{
margin-right: auto;
margin-left: 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
2015-11-23 17:33:29
display: block
z margin: 0
nie zadziałało dla mnie, ani owijanie z text-align: center
elementem.
To jest moje rozwiązanie:
img.center {
position: absolute;
transform: translateX(-50%);
left: 50%;
}
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-09-28 12:26:59
Odkryłem, że jeśli mam obraz i tekst wewnątrz div
, to mogę użyć text-align:center
do wyrównania tekstu i obrazu za jednym zamachem.
HTML:
<div class="picture-group">
<h2 class="picture-title">Picture #1</h2>
<img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
<p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
</div>
CSS:
.picture-group {
border: 1px solid black;
width: 25%;
float: left;
height: 300px;
#overflow:scroll;
padding: 5px;
text-align:center;
}
"CodePen": {]} https://codepen.io/artforlife/pen/MoBzrL?editors=1100
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-06 15:54:22
Czasami bezpośrednio dodajemy zawartość i obrazy na admin wordpress wewnątrz stron. Kiedy wstawiamy obrazy na stronie zawartość i chcemy wyrównać to centrum. Kod wyświetlany jest jako:
**<p><img src="https://abcxyz.com/demo/wp-content/uploads/2018/04/1.jpg" alt=""></p>**
W takim przypadku możesz dodać css w następujący sposób:
Mam nadzieję, że to pomoże w tej sytuacji.Artykuł p img{ margines: 0 auto; wyświetlacz: block; text-align: center; float: brak; }
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-04-17 05:19:43
<dev class="col-sm-8" style="text-align: center;"><img src="{{URL('image/car-trouble-with-clipping-path.jpg')}}" ></dev>
Myślę, że jest to sposób na środkowy obraz w ramce Laravela.
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-09-08 09:48:39