图片未居中

Question

有人可以解释一下为什么图像没有居中吗？ 为什么DHL感动？

 img { padding-right: 1em; vertical-align: middle; margin-left: auto; margin-right: auto; } .text { width: 100%; height: auto; text-align:center; padding: 1em; margin: auto; } 

 <div class="text"> <img src="http://www.zasilkovna.cz/images/page/Zasilkovna_logo_symbol_WEB.png" alt="zasielkovna" width="50" height="50">Zásielkovňa <br> <img src="https://pbs.twimg.com/profile_images/735099060382773248/sws71zha_400x400.jpg" alt="dhl" width="50" height="50">DHL <br> <img src="http://obec-vinodol.sk/wp-content/uploads/2015/03/Slovensk%C3%A1_po%C5%A1ta_Logo.svg_.png" alt="posta" width="56" height="50">Slovenská pošta </div> 

Answer 1

CSS GRID正是为此目的而制作的。

CSS网格规范。

 .text { display: grid; grid-gap: 1rem; grid-template-rows: repeat(3, 1fr); justify-content: center; } .text>div { height: 50px; display: flex; align-items: center; } .text img { height: 50px; max-width: 50px; } .text span { padding: 1em; } 

 <div class="text"> <div> <img src="http://www.zasilkovna.cz/images/page/Zasilkovna_logo_symbol_WEB.png" alt="zasielkovna" /> <span>Zásielkovňa</span> </div> <div> <img src="https://pbs.twimg.com/profile_images/735099060382773248/sws71zha_400x400.jpg" alt="dhl" /> <span>DHL</span> </div> <div> <img src="https://upload.wikimedia.org/wikipedia/de/thumb/1/1f/Slovensk%C3%A1_po%C5%A1ta_Logo.svg/2000px-Slovensk%C3%A1_po%C5%A1ta_Logo.svg.png" alt="posta" /> <span>Slovenská pošta</span> </div> </div> 

Answer 2

使用inline-block并调整文本对齐方式：

 img { padding-right: 1em; vertical-align: middle; margin:5px auto; } .text { display: inline-block; text-align: left; padding: 1em; border:1px solid; } body { /*I used the body but it can be any container*/ text-align: center; } 

 <div class="text"> <img src="http://www.zasilkovna.cz/images/page/Zasilkovna_logo_symbol_WEB.png" alt="zasielkovna" width="50" height="50">Zásielkovňa <br> <img src="https://pbs.twimg.com/profile_images/735099060382773248/sws71zha_400x400.jpg" alt="dhl" width="50" height="50">DHL <br> <img src="https://pbs.twimg.com/profile_images/735099060382773248/sws71zha_400x400.jpg" alt="posta" width="50" height="50">Slovenská pošta </div> 

Answer 3

将每行以相同的宽度包装在div中

 .text { width: 100%; } .row { width: 30%; margin: auto; height: 50px; line-height: 50px; } .row img { display: inline-block; } .row span { display: inline-block; vertical-align: top; } 

 <div class="text"> <div class="row"> <img src="http://www.zasilkovna.cz/images/page/Zasilkovna_logo_symbol_WEB.png" alt="zasielkovna" width="50" height="50"> <span>Zásielkovňa</span> </div> <div class="row"> <img src="https://pbs.twimg.com/profile_images/735099060382773248/sws71zha_400x400.jpg" alt="dhl" width="50" height="50"> <span>DHL</span> </div> <div class="row"> <img src="http://obec-vinodol.sk/wp-content/uploads/2015/03/Slovensk%C3%A1_po%C5%A1ta_Logo.svg_.png" alt="posta" width="50" height="50"> <span>Slovenská pošta</span> </div> </div> 

Answer 4

目前，您有3张图片，旁边有文字。 对于每一行，文本具有不同的长度，这导致了图像的不同位置。

我要做的是为这两个容器创建一个容器，并以正确的方式将容器居中，如下面的代码片段所示：

 .container{ margin-left: 50%; margin-right: 50%; width: 300px; } img { padding-right: 1em; transform: translate(-50%, 0) } 

 <div class="text"> <div class="container"> <img src="http://www.zasilkovna.cz/images/page/Zasilkovna_logo_symbol_WEB.png" alt="zasielkovna" width="50" height="50">Zásielkovňa </div> <div class="container"> <img src="https://pbs.twimg.com/profile_images/735099060382773248/sws71zha_400x400.jpg" alt="dhl" width="50" height="50">DHL </div> <div class="container"> <img src="http://obec-vinodol.sk/wp-content/uploads/2015/03/Slovensk%C3%A1_po%C5%A1ta_Logo.svg_.png" alt="posta" width="56" height="50">Slovenská pošta </div> </div>