1

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>
GJain
  • 5,025
  • 6
  • 48
  • 82
  • Just to confirm, you looking for code to make it vertically middle and horizontally center right?. Table method is the best solution i found, if so please refer this post : http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally?rq=1 – Shiva Jun 13 '16 at 09:19

5 Answers5

2

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/

Mukesh Ram
  • 6,248
  • 4
  • 19
  • 37
1

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>
Teuta Koraqi
  • 1,898
  • 1
  • 10
  • 28
1

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;
}
Tawfiq abu Halawah
  • 1,214
  • 1
  • 12
  • 20
0

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, i.e. 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.

Aaron Lavers
  • 967
  • 9
  • 31
0

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;
}
Maharajan
  • 178
  • 9