Question

我想做以下事情：

包含图片50x50的div和其旁边的文字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

您可以使用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 2

试试这个：

static need = [
    function (token) {
        return myFunc;
    }(token);
]

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

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

Answer 4

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

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

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

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

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 个答案: