CODEWITHSUNDEEP
htmlcss
James Juanjie
James Juanjie

Reputation: 219

how to align elements with icons under eachother?

I have a few divs that act as lists/buttons on my page.

Each div contains an icon and a text.

I need to keep these 'buttons' in the center of the page but at the same time, I have to align the icons and texts under eachother.

So all the icons are under eachother AND all the texts are under eachother.

This is what I have so far:

code https://jsfiddle.net/sy21m4dq/

.list{
  
  width:100%;
  text-align:center;
}

.list-item{
  display:inline-block;
  width:250px;
  
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="list">

<div class="list-item">

<i class="fa fa-user" aria-hidden="true"></i> Account

</div>

<div class="list-item">

<i class="fa fa-sign-in" aria-hidden="true"></i> Account LOGIN

</div>


<div class="list-item">

<i class="fa fa-star" aria-hidden="true"></i> freedback

</div>

<div class="list-item">

<i class="fa fa-question" aria-hidden="true"></i> Help

</div>


</div>

This is what I am looking to achieve:

enter image description here

could someone please advice on this?

Thanks in advance.

Upvotes: 1

Views: 1324

Answers (3)

Mark Witmer
Mark Witmer

Reputation: 128

I'd improve your markup structure and leverage a CSS layout option, such as display table, among others.

My suggestion is to have additional layers of markup for the various CSS layout concerns you have / need.

<div class="list">
    <div class="list-container">
        <div id="list-item"> 
            <div class="list-item-cell"><i class="fa fa-user" aria-hidden="true"></i></div> 
            <div class="list-item-cell">Account</div>
        </div>
        <div id="list-item"> 
            <div class="list-item-cell"><i class="fa fa-star" aria-hidden="true"></i></div> 
            <div class="list-item-cell">freedback</div>
        </div>
        <div id="list-item"> 
            <div class="list-item-cell"><i class="fa fa-question" aria-hidden="true"></i></div> 
            <div class="list-item-cell">Help</div>
        </div>
        <div id="list-item"> 
            <div class="list-item-cell"><i class="fa fa-sign-in" aria-hidden="true"></i></div> 
            <div class="list-item-cell">Account LOGIN</div>
        </div>
    </div>
</div>

In this way, you can leverage the type of layout styles you want in a cleaner fashion. Your markup is your skeleton. If you have too few bones, your design will be more limited.

.list{

  width:100%;
  text-align:center;
}
.list-container {
    display: table;
    max-width: 400px;
    margin: 0 auto;
}

.list-item{
  display: table-row;
  width:250px;
}

.list-item-cell {
    display: table-cell;
}

.list-item-cell:first-child {
    padding-right: 10px;
    width: 30px;
}

Upvotes: 3

niorad
niorad

Reputation: 1370

  • Add a fixed width to the icons

i { width: 20px; text-align: center; }

  • Make the list an inline-flex-container with columns-display
  • Center the whole box with either text-align-center or flex

https://jsfiddle.net/qw2f3ojt/

Upvotes: 0

random_user_name
random_user_name

Reputation: 26160

There's a few things going on that I will explain, but the below snippet works.

  1. You had the divs with id="list-item", which was a typo. They needed to be class="list-item".
  2. You had the .list-item as inline-block, but really they should be block, and the container (the .list div) should be set to the 250px width.
  3. A little icing on the cake to make the icons / text really line up was to apply some width to the icons (.list-item .fa).

body{
  text-align: center;
}

.list {
  display: inline-block;
  width: 150px;
}

.list-item {
  display: block;
  width: auto;
  text-align: left;
}

.list-item .fa  {
  width: 30px;
  text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="list">
  <div class="list-item">
    <i class="fa fa-user" aria-hidden="true"></i> Account
  </div>

  <div class="list-item">
    <i class="fa fa-sign-in" aria-hidden="true"></i> Account LOGIN
  </div>
  <div class="list-item">
    <i class="fa fa-star" aria-hidden="true"></i> freedback
  </div>
  <div class="list-item">
    <i class="fa fa-question" aria-hidden="true"></i> Help
  </div>
</div>

Upvotes: 3

Related Questions