堆栈内存溢出
  简体   繁体   English

在div中将图像和文本居中

[英]Center an image and a text in a div

 原文  2019-06-19 08:50:01  4   7    html/ css

问题描述

I would like some help for this code. 我需要此代码的帮助。 I'm trying to center all the content that is to say images, texts and tables. 我正在尝试将所有内容（例如图像，文本和表格）居中。 When I try to center the images with the display : block and margin-left, margin-right: auto . 当我尝试使用display：block和margin-left，margin-right：auto来居中图像时。 The images go completely right and I don't know why. 图像完全正确，我不知道为什么。 

 .container { display: flex; margin: 0 auto; } .section { flex: 1; /*grow*/ } table.center { margin-left: auto; margin-right: auto; text-align: center; } img { display: block; margin-left: auto; margin-right: auto; } @media (max-width: 768px) { /*breakpoint*/ .container { flex-direction: column; } } 
 <div class="container"> <div class="section"> <table class="center" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><img src="https://image.flaticon.com/icons/svg/1460/1460537.svg" width="15%"></td> </tr> <tr> <td> <h3>COTON 100% BIOLOGIQUE</h3> </td> </tr> </tbody> </table> </div> <div class="section"> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><img src="https://image.flaticon.com/icons/svg/131/131131.svg" width="15%"></td> </tr> <tr> <td> <h3>MADE IN FRANCE</h3> </td> </tr> </tbody> </table> </div> <div class="section"> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><img src="https://image.flaticon.com/icons/svg/1086/1086223.svg" width="15%"></td> </tr> <tr> <td> <h3>IMPRESSION FRANCAISE</h3> </td> </tr> </tbody> </table> </div> </div>

7 个解决方案

解决方案1
 4  2019-06-19 09:04:44

I just go through your code and found that you are using separate <table> for each <tr> . 我只是遍历您的代码，发现您对每个<tr>使用单独的<table> <tr> 。 Where you are only using class="center" for only first <table> . 仅在第一个<table>使用class="center"的地方。 Either give class="center" to each <table> (if your really need, not required in this case). 要么将class =“ center”分配给每个<table> （如果确实需要，在这种情况下则不需要）。 Here is the simplified code. 这是简化的代码。 

 .container { display: flex; margin: 0 auto; } .section { flex: 1; /*grow*/ } table.center { margin-left: auto; margin-right: auto; text-align: center; } img { display: block; margin-left: auto; margin-right: auto; } @media (max-width: 768px) { /*breakpoint*/ .container { flex-direction: column; } } 
 <div class="container"> <div class="section"> <table class="center" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><img src="https://image.flaticon.com/icons/svg/1460/1460537.svg" width="15%"></td> </tr> <tr> <td> <h3>COTON 100% BIOLOGIQUE</h3> </td> </tr> <tr> <td><img src="https://image.flaticon.com/icons/svg/131/131131.svg" width="15%"></td> </tr> <tr> <td> <h3>MADE IN FRANCE</h3> </td> </tr> <tr> <td><img src="https://image.flaticon.com/icons/svg/1086/1086223.svg" width="15%"></td> </tr> <tr> <td> <h3>IMPRESSION FRANCAISE</h3> </td> </tr> </tbody> </table> </div> </div>

解决方案2
 1  2019-06-19 09:04:50

If you just want to center the content, this css would do: 如果您只想将内容居中，则此CSS可以做到： 

.container {
  text-align: center;
}

table {
  width: 100%;
}


 .container { text-align: center; } table { width: 100%; } 
 <div class="container"> <div class="section"> <table class="center" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><img src="https://image.flaticon.com/icons/svg/1460/1460537.svg" width="15%"></td> </tr> <tr> <td> <h3>COTON 100% BIOLOGIQUE</h3> </td> </tr> </tbody> </table> </div> <div class="section"> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><img src="https://image.flaticon.com/icons/svg/131/131131.svg" width="15%"></td> </tr> <tr> <td> <h3>MADE IN FRANCE</h3> </td> </tr> </tbody> </table> </div> <div class="section"> <table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><img src="https://image.flaticon.com/icons/svg/1086/1086223.svg" width="15%"></td> </tr> <tr> <td> <h3>IMPRESSION FRANCAISE</h3> </td> </tr> </tbody> </table> </div> </div>

Same code, but without using <table> : 相同的代码，但不使用<table> ： 

 .container { text-align: center; } 
 <div class="container"> <div> <img src="https://image.flaticon.com/icons/svg/1460/1460537.svg" width="15%"> <h3>COTON 100% BIOLOGIQUE</h3> </div> <div> <img src="https://image.flaticon.com/icons/svg/131/131131.svg" width="15%"> <h3>MADE IN FRANCE</h3> </div> <div> <img src="https://image.flaticon.com/icons/svg/1086/1086223.svg" width="15%"> <h3>IMPRESSION FRANCAISE</h3> </div> </div>

解决方案3
 0  2019-06-19 09:06:21

I would advise against using tables for a layout like this. 我建议不要将表格用于这种布局。 I would do it with flex-box and it would look something like this: 我会用flex-box来做，看起来像这样： 

 .container { display: flex; justify-content: center; align-items: center; flex-direction: row; } .container .section { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; } h3 { text-transform: uppercase; } @media (max-width: 768px) { /* breakpoint */ .container { flex-direction: column; } } 
 <div class="container"> <div class="section"> <img src="https://image.flaticon.com/icons/svg/1460/1460537.svg" width="15%" /> <h3>Coton 100% biologique</h3> </div> <div class="section"> <img src="https://image.flaticon.com/icons/svg/131/131131.svg" width="15%" /> <h3>Made in France</h3> </div> <div class="section"> <img src="https://image.flaticon.com/icons/svg/1086/1086223.svg" width="15%" /> <h3>Impression Francaise</h3> </div> </div>

解决方案4
 0  2019-06-19 09:09:33

添加此CSS它将起作用

.section > table{width:100%;text-align:center}

解决方案5
 0  2019-06-19 09:11:52

You can do this using transform property 您可以使用transform属性执行此操作 

 .center { position: relative; left: 50%; transform: translateX(-50%); text-align: center } 
 <div class="container"> <div class="section"> <table class="center" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><img src="https://image.flaticon.com/icons/svg/1460/1460537.svg" width="15%"></td> </tr> <tr> <td> <h3>COTON 100% BIOLOGIQUE</h3> </td> </tr> </tbody> </table> </div> <div class="section"> <table class="center" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><img src="https://image.flaticon.com/icons/svg/131/131131.svg" width="15%"></td> </tr> <tr> <td> <h3>MADE IN FRANCE</h3> </td> </tr> </tbody> </table> </div> <div class="section"> <table class="center" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><img src="https://image.flaticon.com/icons/svg/1086/1086223.svg" width="15%"></td> </tr> <tr> <td> <h3>IMPRESSION FRANCAISE</h3> </td> </tr> </tbody> </table> </div> </div>

解决方案6
 0  2019-06-19 09:40:59

Use one table with multiple tbody and give media query css for desktop view display inline 将一个表与多个tbody一起使用，并为桌面视图内联显示提供media query CSS 

 .container { display: flex; margin: 0 auto; } .section { flex: 1; /*grow*/ } table.center { margin-left: auto; margin-right: auto; text-align: center; } img { display: block; margin-left: auto; margin-right: auto; } @media (min-width: 991px) { table tbody { display:table-cell; padding: 10px 25px; } table tbody td img { width:75px; } } @media (max-width: 768px) { /*breakpoint*/ .container { flex-direction: column; } } 
 <div class="container"> <div class="section"> <table class="center" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><img src="https://image.flaticon.com/icons/svg/1460/1460537.svg" width="15%"></td> </tr> <tr> <td> <h3>COTON 100% BIOLOGIQUE</h3> </td> </tr> </tbody> <tbody> <tr> <td><img src="https://image.flaticon.com/icons/svg/131/131131.svg" width="15%"></td> </tr> <tr> <td> <h3>MADE IN FRANCE</h3> </td> </tr> </tbody> <tbody> <tr> <td><img src="https://image.flaticon.com/icons/svg/1086/1086223.svg" width="15%"></td> </tr> <tr> <td> <h3>IMPRESSION FRANCAISE</h3> </td> </tr> </tbody> </table> </div> </div>

解决方案7
 0  2019-06-19 09:49:18

 .center { position: relative; left: 50%; transform: translateX(-50%); text-align: center } 
 <div class="container"> <div class="section"> <table class="center" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td><img src="https://image.flaticon.com/icons/svg/1460/1460537.svg" width="15%"></td> </tr> <tr> <td> <h3>COTON 100% BIOLOGIQUE</h3> </td> </tr> <tr> <td><img src="https://image.flaticon.com/icons/svg/131/131131.svg" width="15%"></td> </tr> <tr> <td> <h3>MADE IN FRANCE</h3> </td> </tr> <tr> <td><img src="https://image.flaticon.com/icons/svg/1086/1086223.svg" width="15%"></td> </tr> <tr> <td> <h3>IMPRESSION FRANCAISE</h3> </td> </tr> </tbody> </table> </div> </div> 

 .center { position: relative; left: 50%; transform: translateX(-50%); text-align: center }

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在div的中心对齐文本和图像 - align text and image in center of div div中的文本居中，图像在左侧 - Center text in div with image on left 将div内的文字和图片居中 - Center a text inside a div with an image also 如何在背景div气球图像中居中显示文本？ - How to center text in a background div baloon image? Bootstrap Div，文本和图像（对齐）居中 - Bootstrap Div with text and image (aligned) in center Bootstrap 4 居中（水平）图像 + div 内的文本 - Bootstrap 4 center (horizontally) image + text inside div 如何在 div/容器中居中文本和图像 - How to center text & image in a div/container 如何将包含文本和图像的div对齐到中心 - how to align div containing text and image to center 在Div的精确中心显示图像和文本 - Display Image and Text in Exact Center of Div 将固定宽度div中的文本与图像对齐 - Aligning text in center in a fixed width div with an image
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM