how to align elements with icons under eachother? - html

Question

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:
could someone please advice on this?
Thanks in advance.

Answer 1

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

Answer 2

There's a few things going on that I will explain, but the below snippet works.
You had the divs with id="list-item", which was a typo. They needed to be class="list-item".
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.
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>

Answer 3

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/