CODEWITHSUNDEEP
htmlcss
GJain
GJain

Reputation: 5093

how to align div containing text and image to center

I want to do following:

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>

Upvotes: 1

Views: 2266

Answers (5)

Tawfiq abu Halawah
Tawfiq abu Halawah

Reputation: 1234

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

Upvotes: 1

Maharajan
Maharajan

Reputation: 188

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

Upvotes: 0

Mukesh Ram
Mukesh Ram

Reputation: 6328

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/

Upvotes: 2

Teuta Koraqi
Teuta Koraqi

Reputation: 1898

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>

Upvotes: 1

Aaron Lavers
Aaron Lavers

Reputation: 986

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.

Upvotes: 0

Related Questions