how to align div containing text and image to center
Question
I want to do following:
- A div containing an image 50x50 and text next to it of font 25px.
Image and text should align in middle.
The div containing image and text should align to center of it parent.
I tried the followint but it does not give the desired result.
What needs to be done?
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 answers
solution1
2 ACCPTED 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/
solution2
1 2016-06-13 09:00:25
You can do this with 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>
solution3
1 2016-06-13 09:47:44
please check this 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>
and 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;
}
solution4
0 2016-06-13 08:55:46
Generally speaking, you would use text-align: center on the parent container.
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.
For your use case, I'd suggest text-align.
solution5
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.