CODEWITHSUNDEEP
htmlcss
DjKillerMemeStar
DjKillerMemeStar

Reputation: 425

HTML Align text and icons

I would like to align some icons and some text in a nice grid like fashion. The text needs to be centerd under the second icon. It would have to look like this. 

 ____     ____     ____
|    |   |    |   |    |
|ICON|   |ICON|   |ICON|
|____|   |____|   |____|
          TEXT

Is there any easy way to achieve this?

Upvotes: 0

Views: 456

Answers (5)

Danielle Burgess
Danielle Burgess

Reputation: 36

Create a class that controls the size of each of the areas that hold your icons. As a sample i just used px but if you want it responsive then i would suggest that you use %. With a holder for each icon you can easily add text below, this will then stay nicely aligned.

Sample code snippet:

.pull-left {
  float: left;
}
.icon-box {
  width: 100px;
  text-align: center;
}
.icon {
  width: 60px;
  height: 60px;
  border: 1px solid;
  margin: 0 auto;
  display: block;
}
<div class="icon-box pull-left">
  <div class="icon">ICON</div>
</div>
<div class="icon-box pull-left">
  <div class="icon">ICON</div>
  <p>Text</p>
</div>
<div class="icon-box pull-left">
  <div class="icon">ICON</div>
</div>

Upvotes: 1

Aleksander
Aleksander

Reputation: 121

One way I could think of is to create 3 container (for example 3 divs) with a css property on width (let say 33% width each, or something smaller if you need to add margin (you could even use px not %, but I recommand % for responsivness) with a float left property. Those divs will contain the icons, then you create another 3 icons with the same propreties that will display under the icons. Now you just have to put the text in the center one with text align center and that's it. You gave us few informations so I can't help you better than this.

Here you have an example of what I meant, you just need to implement it by your needs.

html:

<div class="container">
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="icon"></div>
  <div class="text_empty"></div>
  <div class="text"></div>
<div class="text_empty"></div>

css:

.container {width: 100%;}
.icon {width:33%; float: left; }
.text_empty {width:33%; float: left; }
.text {width:33%; float: left; text-align:center; }

Upvotes: 0

Dylan Wijnen
Dylan Wijnen

Reputation: 219

Have you heard from bootstrap 3 ? It has a lot of features that help you with responsive alignment.

An example of this would be :

<div class="row">
  <div class="col-md-4 text-center">
    <img src="my-picture.jpg" class="img-responsive" />
  </div>
  <div class="col-md-4 text-center">
    <img src="my-picture.jpg" class="img-responsive" />
  </div>
  <div class="col-md-4 text-center">
    <img src="my-picture.jpg" class="img-responsive" />
  </div>
</div>

Upvotes: 0

Anup Sharma
Anup Sharma

Reputation: 11

create a row div and give it 100% width and float left and inside this div create 3 div as a col div and give each 33% and float left and place your icon inside these div..now create another row width 100% float left now place p tag inside it and style this p tag text-align:center now you will see your text always below 2nd icon img....

    <div style="width:100%;float:left;">

        <div style="width:33%;float:left;">
            <img src="your source" />
        </div>

        <div style="width:33%;float:left;">
            <img src="your source" />
        </div>    

        <div style="width:33%;float:left;">
            <img src="your source" />
        </div>

    </div>

    <div style="width:100%;float:left;">

        <p style="text-align:center;"> You Text Here..</p>

    </div>

Upvotes: 1

Jobayer
Jobayer

Reputation: 1231

you can do it quite easily. You need to use list item & display inline with text center property. Like below code -

HTML portion 

<div id="test1">
<ul>
 <li>
  <img src="" alt="num1">

 </li>
 <li>
 <img src="" alt="num2">
 <br/>
 121
</li>
<li><img src="" alt="num3"></li>
</ul>
</div>

CSS for it 

#test1 ul li {
display: inline;
list-style: none;
float: left;
padding: 0;
text-align:center; 
}

Upvotes: 0

Related Questions