如何将包含文本和图像的div对齐到中心
[英]how to align div containing text and image to center
问题描述
I want to do following: 
我要执行以下操作：
- A div containing an image 50x50 and text next to it of font 25px. 一个div，其中包含图片50x50和旁边的字体为25px的文本。
Image and text should align in middle.
图片和文字应居中对齐。 The div containing image and text should align to center of it parent.
包含图片和文字的div应对齐其父对象的中心。
I tried the followint but it does not give the desired result. 我尝试了followint，但没有得到期望的结果。
What needs to be done? 需要做什么？
http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float 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>
5 个解决方案
解决方案1
2 已采纳 2016-06-13 09:01:56
Try this: 尝试这个：
<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;
}
Here is jsfiddle link: https://jsfiddle.net/x376p83x/ 这是jsfiddle链接： https ://jsfiddle.net/x376p83x/
解决方案2
1 2016-06-13 09:00:25
You can do this with flexbox: 您可以使用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
1 2016-06-13 09:47:44
please check this plunker https://plnkr.co/edit/wlIixTpqm2dUJnalb9b6?p=preview 请检查此矮人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>
and CSS 和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
0 2016-06-13 08:55:46
Generally speaking, you would use text-align: center on the parent container. 一般来说，您可以在父容器上使用text-align: center 。
http://www.w3schools.com/cssref/pr_text_text-align.asp http://www.w3schools.com/cssref/pr_text_text-align.asp
You can also achieve this using margins, ie margin: 0 auto where '0' is your vertical margins, and 'auto' calculates the horizontal margins automatically - thus positioning your element in the centre. 您也可以使用边距来实现此目的，即margin: 0 auto其中'0'是您的垂直边距，而'auto'自动计算水平边距-从而将元素放置在中心。
For your use case, I'd suggest text-align. 对于您的用例，建议使用文本对齐方式。
解决方案5
0 2016-06-13 09:00:08
try this 尝试这个
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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.