如何將包含文本和圖像的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