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

Question

我要执行以下操作：

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

我尝试了followint，但没有得到期望的结果。

需要做什么？

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>

Answer 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/

Answer 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>

Answer 3

请检查此矮人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;
}

Answer 4

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

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

您也可以使用边距来实现此目的，即margin: 0 auto其中'0'是您的垂直边距，而'auto'自动计算水平边距-从而将元素放置在中心。

对于您的用例，建议使用文本对齐方式。

Answer 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;
}

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

问题描述

5 个解决方案

解决方案1
2 已采纳 2016-06-13 09:01:56

解决方案2
1 2016-06-13 09:00:25

解决方案3
1 2016-06-13 09:47:44

解决方案4
0 2016-06-13 08:55:46

解决方案5
0 2016-06-13 09:00:08

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

问题描述

5 个解决方案

解决方案1 2 已采纳 2016-06-13 09:01:56

解决方案2 1 2016-06-13 09:00:25

解决方案3 1 2016-06-13 09:47:44

解决方案4 0 2016-06-13 08:55:46

解决方案5 0 2016-06-13 09:00:08

解决方案1
2 已采纳 2016-06-13 09:01:56

解决方案2
1 2016-06-13 09:00:25

解决方案3
1 2016-06-13 09:47:44

解决方案4
0 2016-06-13 08:55:46

解决方案5
0 2016-06-13 09:00:08