CODEWITHSUNDEEP
htmlcssflexboxcentering
Arya
Arya

Reputation: 1469

Horizontally Centering Flexbox with Image and Text

I have a div like this, where I want the text and image to be horizontally aligned, where the space from the left of the div and right of the div are equal. Here's the current code I have, though it is definitely not optimal:

.window{
  position:absolute;
  width: 400px;
  height: 300px;
  background-color:#424242;
}
.content{
  padding-top:50px;
  width: 50%;
  position:relative;
  vertical-align: top;
  margin: 0 auto;
  display:flex;
}
img {
  height: 32px;
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  position: relative;
  float: left;
}
.textcontent{
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 16px;
  display: block;
  line-height: 182%;
}
.text{
  font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
</head>

<body>


<div class="window">
  <div class="content">
    <img src="https://cdn4.iconfinder.com/data/icons/family-and-home-collection/110/Icon__grandfather-32.png" />
    <div class="textcontent">
      <div class="text"> Some Centered Text. </div>
      <div class="text"> Some Other Text. </div>
    </div>
  </div>
</div>

</body>
</html>

The issue is that the "window" could be any size, the image could be a fair amount of sizes, and the items in text content could be longer and larger font-size. Additionally, the second line of text is not always visible.

This is a problem, since if the text is very long, the 50% width is very small, and the text wraps several times when there is plenty of room.

.window{
  position:absolute;
  width: 500px;
  height: 300px;
  background-color:#424242;
}
.content{
  padding-top:50px;
  width: 50%;
  position:relative;
  vertical-align: top;
  margin: 0 auto;
  display:flex;
}
img {
  height: 32px;
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  position: relative;
  float: left;
}
.texcontentt{
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 16px;
  display: block;
  line-height: 182%;
}
.text{
  font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
</head>

<body>


<div class="window">
  <div class="content">
    <img src="https://cdn4.iconfinder.com/data/icons/family-and-home-collection/110/Icon__grandfather-32.png" />
    <div class="textcontent">
      <div class="text"> Some text that is very very long and wraps. </div>
      <div class="text"> This text is also very long and also wraps. </div>
    </div>
  </div>
</div>

</body>
</html>

I could counter this by making the width % in the .content rule larger, but then for small content in a large window, it will not be centered anymore.

Long story short, is there a better way to get the text centering I want for different sizes, without having to have it be very narrow?

Thank you!

Upvotes: 1

Views: 5759

Answers (1)

Dhavs
Dhavs

Reputation: 143

To align your text and image horizontally inside div, you could use display:flex and justify-content: center. Justify-content:center will align the children at the center of the container.

.content {
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center; /* Only if you want it vertically center-aligned as well */
  background: #ccc;
  padding: 40px;
}
<div class="window">
  <div class="content">
    <img src="https://cdn4.iconfinder.com/data/icons/family-and-home-collection/110/Icon__grandfather-32.png" />
    <div class="textcontent">
      <div class="text"> Some text that is very very long and wraps. </div>
      <div class="text"> This text is also very long and also wraps. </div>
    </div>
  </div>
</div>

View in CodePen

Hope this helps!

Upvotes: 6

Related Questions