CODEWITHSUNDEEP
htmlcss
Steven Seagull
Steven Seagull

Reputation: 85

css icon and text centered next to each other

How can I place an icon and text inside a box and then center them. If there's not enough space for the text it should break to new line under top text. So like this:

enter image description here

<div class="wrapper">
    <span class="icon"></span>
    <span class="text">First line second line</span>
</div

Upvotes: 0

Views: 8018

Answers (2)

nashcheez
nashcheez

Reputation: 5183

The idea here is two take two display: inline-block elements and place them side by side.

And provide them enough margin so that they align accordingly. Can be done without using flex.

Refer code:

.wrapper {
  width: 324px;
  background-color: red;
  height: 130px;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.icon {
  height: 50px;
  width: 49%;
  display: inline-block;
  margin-top: 20px;
  vertical-align: bottom;
}

.icon img {
  width: 50px;
  float: right;
}

.text {
  display: inline-block;
  width: 49%;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 20px;
  vertical-align: middle;
}
<div class="wrapper">
  <div class="icon">
    <img src="https://cdn2.iconfinder.com/data/icons/weather-2-4/100/Weather_Set-07-512.png" />
  </div>
  <div class="text">First line second line</div>
  </div

Upvotes: 1

Lavya R
Lavya R

Reputation: 201

Hope this would do

.wrapper {
  width: 300px;
  background-color: red;
  height: 150px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.icon {
  height: 50px;
  width: 56px;
}

.text {
  margin: 10px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 20px;
}
<div class="wrapper">
  <img class="icon" src="http://i.imgur.com/FApqk3D.jpg">
  <span class="text">First line 
        <br>second line</span>
  </div

Upvotes: 6

Related Questions