如何将包含文本和图像的div对齐到中心答案

【问题标题】：how to align div containing text and image to center如何将包含文本和图像的div对齐到中心
【发布时间】：2016-10-13 14:45:58
【问题描述】：

我想做以下事情：

一个 div，包含一个 50x50 的图像和旁边的 25px 字体的文本。
图片和文字应该居中对齐。
包含图像和文本的 div 应与其父级的中心对齐。

我尝试了以下方法，但没有给出预期的结果。

需要做什么？

http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float

<html>
<head>
<style>
img {
    float: center;
}
</style>
</head>
<body>

<p align="center"><img src="w3css.gif" alt="W3Schools.com" width="50" height="50">
Lorem .</p>

</body>
</html>

【问题讨论】：

只是为了确认一下，您正在寻找使其垂直居中和水平居中的代码吗？表格法是我找到的最好的解决方案，如果是，请参考这篇文章：stackoverflow.com/questions/356809/…

标签： html css

【解决方案1】：

试试这个：

<p align="center"><img src="http://www.ifn-modern.com/skin/frontend/fortis/default/images/phone.png" alt="" width="50" height="50">
Lorem .</p>

p img{
  display:inline-block;
  vertical-align:middle;
  margin-right:5px;
}

这里是 jsfiddle 链接：https://jsfiddle.net/x376p83x/

【讨论】：

【解决方案2】：

你可以用 flexbox 做到这一点：

.parent {
  height: 300px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightgrey;
}
p {
  font-size: 25px;
  }

<div class="parent">

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.</p>
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS1EcWaTLIwhn69VJFubIdi4cpn2MYbkYN8hvMk00abhBHoO5fTnjdTgLY" alt="W3Schools.com" width="50" height="50">
  </div>

【讨论】：

【解决方案3】：

请检查这个 plunker https://plnkr.co/edit/wlIixTpqm2dUJnalb9b6?p=preview

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Centered Div</h1>
    <div class="parent-div">
      <div class="child-div">
        <span class="my-text">Iam Centered centerd text very long Iam Centered centerd text very long</span>
        <img src="test.svg" style="width:50px; height:50px;"/>
      </div>
    </div>
  </body>

</html>

和 CSS

/* Styles go here */

.parent-div{
  background:green;
  padding:10px;
}
.child-div{
  display:table;
  margin:0 auto;
 text-align:center;
 color:white;


}
.my-text{
  max-width:200px;
  display:inline-block;
}

【讨论】：

【解决方案4】：

一般来说，您会在父容器上使用text-align: center。

http://www.w3schools.com/cssref/pr_text_text-align.asp

您可以也可以使用边距来实现这一点，即margin: 0 auto 其中“0”是您的垂直边距，“auto”自动计算水平边距 - 从而将您的元素定位在中心。

对于您的用例，我建议使用 text-align。

【讨论】：

【解决方案5】：

试试这个

html
<p class="cetner"><img src="http://www.planwallpaper.com/static/images/butterfly-hq-wallpaper_09354994_256.jpg" alt="image" width="50" height="50">
Lorem .</p>

    css
    p.cetner {
    width: 100px;
    height: 50px;
    text-align: center;
}

img {
 display:inline-block;
vertical-align:middle;
}

【讨论】：