How to keep icons aligned strictly inside div?

up vote
0
down vote

favorite

I am making a sidebar and am new to css. I created a div which represents a closed sidebar. It is supposed to only show the icons. Unfortunately the icons come in a misaligned manner inside the div based on their size. How do I fix this?

.sidenav {

  height: 492px;

  width: 300px;

  background-color: #db3d44;

}



.data-icon {

  font-size: 45px;

  color: black;

  opacity: 0.5;

  float: left;

  margin-left: 9px;

  margin-top: 5px;

  margin-bottom: 10px;

}



.hamburger {

  background-color: transparent;

  border-color: transparent;

  color: white;

  margin-left: 10px;

  margin-top: 4px;

  font-size: 25px;

}



.hamburger:hover {

  color: black;

}



.sidenav-closed {

  width: 65px;

  float: left;

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="sidenav-closed sidenav">

  <button class="hamburger data-disappear">☰</button>

  <div class="icons-only">

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-car"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

  </div>

</div>

The car icon is misaligned here. What's the solution?

edited Nov 21 at 18:27

Smollet777

898515

asked Nov 21 at 18:13

anwesh mohapatra

346

I found that latest (5.5) version of FA has narrower car icon. fontawesome.com/icons/car?style=solid
– Smollet777
Nov 21 at 18:33

1

Your .data.icon use float: left and with that won't center as they collapse to their content and then float to the left. Give them text-align: center and then either set their width to 100% or remove float (which I recommend)
– LGSon
Nov 21 at 18:52

add a comment |

up vote
0
down vote

favorite

.sidenav {

  height: 492px;

  width: 300px;

  background-color: #db3d44;

}



.data-icon {

  font-size: 45px;

  color: black;

  opacity: 0.5;

  float: left;

  margin-left: 9px;

  margin-top: 5px;

  margin-bottom: 10px;

}



.hamburger {

  background-color: transparent;

  border-color: transparent;

  color: white;

  margin-left: 10px;

  margin-top: 4px;

  font-size: 25px;

}



.hamburger:hover {

  color: black;

}



.sidenav-closed {

  width: 65px;

  float: left;

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="sidenav-closed sidenav">

  <button class="hamburger data-disappear">☰</button>

  <div class="icons-only">

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-car"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

  </div>

</div>

The car icon is misaligned here. What's the solution?

edited Nov 21 at 18:27

Smollet777

898515

asked Nov 21 at 18:13

anwesh mohapatra

346

I found that latest (5.5) version of FA has narrower car icon. fontawesome.com/icons/car?style=solid
– Smollet777
Nov 21 at 18:33

1

Your .data.icon use float: left and with that won't center as they collapse to their content and then float to the left. Give them text-align: center and then either set their width to 100% or remove float (which I recommend)
– LGSon
Nov 21 at 18:52

add a comment |

up vote
0
down vote

favorite

.sidenav {

  height: 492px;

  width: 300px;

  background-color: #db3d44;

}



.data-icon {

  font-size: 45px;

  color: black;

  opacity: 0.5;

  float: left;

  margin-left: 9px;

  margin-top: 5px;

  margin-bottom: 10px;

}



.hamburger {

  background-color: transparent;

  border-color: transparent;

  color: white;

  margin-left: 10px;

  margin-top: 4px;

  font-size: 25px;

}



.hamburger:hover {

  color: black;

}



.sidenav-closed {

  width: 65px;

  float: left;

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="sidenav-closed sidenav">

  <button class="hamburger data-disappear">☰</button>

  <div class="icons-only">

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-car"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

  </div>

</div>

The car icon is misaligned here. What's the solution?

edited Nov 21 at 18:27

Smollet777

898515

asked Nov 21 at 18:13

anwesh mohapatra

346

.sidenav {

  height: 492px;

  width: 300px;

  background-color: #db3d44;

}



.data-icon {

  font-size: 45px;

  color: black;

  opacity: 0.5;

  float: left;

  margin-left: 9px;

  margin-top: 5px;

  margin-bottom: 10px;

}



.hamburger {

  background-color: transparent;

  border-color: transparent;

  color: white;

  margin-left: 10px;

  margin-top: 4px;

  font-size: 25px;

}



.hamburger:hover {

  color: black;

}



.sidenav-closed {

  width: 65px;

  float: left;

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="sidenav-closed sidenav">

  <button class="hamburger data-disappear">☰</button>

  <div class="icons-only">

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-car"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

  </div>

</div>

The car icon is misaligned here. What's the solution?

.sidenav {

  height: 492px;

  width: 300px;

  background-color: #db3d44;

}



.data-icon {

  font-size: 45px;

  color: black;

  opacity: 0.5;

  float: left;

  margin-left: 9px;

  margin-top: 5px;

  margin-bottom: 10px;

}



.hamburger {

  background-color: transparent;

  border-color: transparent;

  color: white;

  margin-left: 10px;

  margin-top: 4px;

  font-size: 25px;

}



.hamburger:hover {

  color: black;

}



.sidenav-closed {

  width: 65px;

  float: left;

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="sidenav-closed sidenav">

  <button class="hamburger data-disappear">☰</button>

  <div class="icons-only">

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-car"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

  </div>

</div>

.sidenav {

  height: 492px;

  width: 300px;

  background-color: #db3d44;

}



.data-icon {

  font-size: 45px;

  color: black;

  opacity: 0.5;

  float: left;

  margin-left: 9px;

  margin-top: 5px;

  margin-bottom: 10px;

}



.hamburger {

  background-color: transparent;

  border-color: transparent;

  color: white;

  margin-left: 10px;

  margin-top: 4px;

  font-size: 25px;

}



.hamburger:hover {

  color: black;

}



.sidenav-closed {

  width: 65px;

  float: left;

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="sidenav-closed sidenav">

  <button class="hamburger data-disappear">☰</button>

  <div class="icons-only">

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-car"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

  </div>

</div>

html css

edited Nov 21 at 18:27

Smollet777

898515

asked Nov 21 at 18:13

anwesh mohapatra

346

edited Nov 21 at 18:27

Smollet777

898515

asked Nov 21 at 18:13

anwesh mohapatra

346

edited Nov 21 at 18:27

Smollet777

898515

edited Nov 21 at 18:27

Smollet777

898515

edited Nov 21 at 18:27

Smollet777

898515

asked Nov 21 at 18:13

anwesh mohapatra

346

asked Nov 21 at 18:13

anwesh mohapatra

346

asked Nov 21 at 18:13

anwesh mohapatra

346

I found that latest (5.5) version of FA has narrower car icon. fontawesome.com/icons/car?style=solid
– Smollet777
Nov 21 at 18:33

1

Your .data.icon use float: left and with that won't center as they collapse to their content and then float to the left. Give them text-align: center and then either set their width to 100% or remove float (which I recommend)
– LGSon
Nov 21 at 18:52

add a comment |

I found that latest (5.5) version of FA has narrower car icon. fontawesome.com/icons/car?style=solid
– Smollet777
Nov 21 at 18:33

1

Your .data.icon use float: left and with that won't center as they collapse to their content and then float to the left. Give them text-align: center and then either set their width to 100% or remove float (which I recommend)
– LGSon
Nov 21 at 18:52

I found that latest (5.5) version of FA has narrower car icon. fontawesome.com/icons/car?style=solid
– Smollet777
Nov 21 at 18:33

Your .data.icon use float: left and with that won't center as they collapse to their content and then float to the left. Give them text-align: center and then either set their width to 100% or remove float (which I recommend)
– LGSon
Nov 21 at 18:52

add a comment |

3 Answers
3

active

oldest

votes

up vote
2
down vote

accepted

You could try to align all the icons to the center so your .data-icon class could look like this:

.data-icon {

    font-size: 45px;

    color: black;

    opacity: 0.5;

    display: block;

    width: 100%;

    text-align: center;

}

answered Nov 21 at 18:18

Marek Sapiński

1045

add a comment |

up vote
0
down vote

Your div elements doesn't have set width and height in CSS - so the icons are strictly aligned inside them.

If you want to vertically center them and learn something new use flexbox:

.icons-only { 

  display: flex;

  flex-direction: column;

  align-items: center; 

}

and

.data-icon {

   ...

   margin-left:0

}

Your car icon is also a little bit bigger than house - you can a little change it size by add new class to it or use this:

.data-icon:nth-child(2) {

  font-size: 40px;

}

This CSS code will take second (=2) element with class .data-icon and set different font size for it

edited Nov 21 at 18:28

answered Nov 21 at 18:21

Kamil Kiełczewski

8,04275486

add a comment |

up vote
0
down vote

The icons are inline elements so they will be left aligned by default. Add in that the icons are not that same size (this is normal), you get an uneven alignment.

To remedy this, add text-align: center to .icons-only.

Note: Given the layout in the example, it does not appear necessary to float .data-icon to the left.

.sidenav {

  height: 492px;

  width: 300px;

  background-color: #db3d44;

}



.icons-only { 

  text-align: center;

}



.data-icon {

  color: rgba( 0, 0, 0, 0.5 );

  font-size: 45px;

}



.hamburger {

  background-color: transparent;

  border-color: transparent;

  color: white;

  margin-left: 10px;

  margin-top: 4px;

  font-size: 25px;

}



.hamburger:hover {

  color: black;

}



.sidenav-closed {

  width: 65px;

  float: left;

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="sidenav-closed sidenav">

  <button class="hamburger data-disappear">☰</button>

  <div class="icons-only">

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-car"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

  </div>

</div>

edited Nov 21 at 19:44

answered Nov 21 at 18:40

hungerstar

15.7k32645

It is actually the .data-icon that should have text-align: center;, but since that property is inherited it still works, and it is not recommended to rely on inheritance as if this change, your solution will stop working. In addition they are floated, which you say nothing about (and the reason they are left aligned)
– LGSon
Nov 21 at 18:47

.text-align:center; on .data-icon would work. As for the inheritance "issue", I would say that's subjective and depends on the fluidity of the project/markup going forward. Though not a bad idea. In my example the icons are not floated, removing text-align: center; yields the same results as the OP's example.
– hungerstar
Nov 21 at 19:42

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418236%2fhow-to-keep-icons-aligned-strictly-inside-div%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

up vote
2
down vote

accepted

You could try to align all the icons to the center so your .data-icon class could look like this:

.data-icon {

    font-size: 45px;

    color: black;

    opacity: 0.5;

    display: block;

    width: 100%;

    text-align: center;

}

answered Nov 21 at 18:18

Marek Sapiński

1045

add a comment |

up vote
2
down vote

accepted

You could try to align all the icons to the center so your .data-icon class could look like this:

.data-icon {

    font-size: 45px;

    color: black;

    opacity: 0.5;

    display: block;

    width: 100%;

    text-align: center;

}

answered Nov 21 at 18:18

Marek Sapiński

1045

add a comment |

up vote
2
down vote

accepted

You could try to align all the icons to the center so your .data-icon class could look like this:

.data-icon {

    font-size: 45px;

    color: black;

    opacity: 0.5;

    display: block;

    width: 100%;

    text-align: center;

}

answered Nov 21 at 18:18

Marek Sapiński

1045

You could try to align all the icons to the center so your .data-icon class could look like this:

.data-icon {

    font-size: 45px;

    color: black;

    opacity: 0.5;

    display: block;

    width: 100%;

    text-align: center;

}

answered Nov 21 at 18:18

Marek Sapiński

1045

answered Nov 21 at 18:18

Marek Sapiński

1045

answered Nov 21 at 18:18

Marek Sapiński

1045

answered Nov 21 at 18:18

Marek Sapiński

1045

add a comment |

up vote
0
down vote

Your div elements doesn't have set width and height in CSS - so the icons are strictly aligned inside them.

If you want to vertically center them and learn something new use flexbox:

.icons-only { 

  display: flex;

  flex-direction: column;

  align-items: center; 

}

and

.data-icon {

   ...

   margin-left:0

}

Your car icon is also a little bit bigger than house - you can a little change it size by add new class to it or use this:

.data-icon:nth-child(2) {

  font-size: 40px;

}

This CSS code will take second (=2) element with class .data-icon and set different font size for it

edited Nov 21 at 18:28

answered Nov 21 at 18:21

Kamil Kiełczewski

8,04275486

add a comment |

up vote
0
down vote

Your div elements doesn't have set width and height in CSS - so the icons are strictly aligned inside them.

If you want to vertically center them and learn something new use flexbox:

.icons-only { 

  display: flex;

  flex-direction: column;

  align-items: center; 

}

and

.data-icon {

   ...

   margin-left:0

}

Your car icon is also a little bit bigger than house - you can a little change it size by add new class to it or use this:

.data-icon:nth-child(2) {

  font-size: 40px;

}

This CSS code will take second (=2) element with class .data-icon and set different font size for it

edited Nov 21 at 18:28

answered Nov 21 at 18:21

Kamil Kiełczewski

8,04275486

add a comment |

up vote
0
down vote

Your div elements doesn't have set width and height in CSS - so the icons are strictly aligned inside them.

If you want to vertically center them and learn something new use flexbox:

.icons-only { 

  display: flex;

  flex-direction: column;

  align-items: center; 

}

and

.data-icon {

   ...

   margin-left:0

}

Your car icon is also a little bit bigger than house - you can a little change it size by add new class to it or use this:

.data-icon:nth-child(2) {

  font-size: 40px;

}

This CSS code will take second (=2) element with class .data-icon and set different font size for it

edited Nov 21 at 18:28

answered Nov 21 at 18:21

Kamil Kiełczewski

8,04275486

Your div elements doesn't have set width and height in CSS - so the icons are strictly aligned inside them.

If you want to vertically center them and learn something new use flexbox:

.icons-only { 

  display: flex;

  flex-direction: column;

  align-items: center; 

}

and

.data-icon {

   ...

   margin-left:0

}

Your car icon is also a little bit bigger than house - you can a little change it size by add new class to it or use this:

.data-icon:nth-child(2) {

  font-size: 40px;

}

This CSS code will take second (=2) element with class .data-icon and set different font size for it

edited Nov 21 at 18:28

answered Nov 21 at 18:21

Kamil Kiełczewski

8,04275486

edited Nov 21 at 18:28

answered Nov 21 at 18:21

Kamil Kiełczewski

8,04275486

answered Nov 21 at 18:21

Kamil Kiełczewski

8,04275486

answered Nov 21 at 18:21

Kamil Kiełczewski

8,04275486

add a comment |

up vote
0
down vote

The icons are inline elements so they will be left aligned by default. Add in that the icons are not that same size (this is normal), you get an uneven alignment.

To remedy this, add text-align: center to .icons-only.

Note: Given the layout in the example, it does not appear necessary to float .data-icon to the left.

.sidenav {

  height: 492px;

  width: 300px;

  background-color: #db3d44;

}



.icons-only { 

  text-align: center;

}



.data-icon {

  color: rgba( 0, 0, 0, 0.5 );

  font-size: 45px;

}



.hamburger {

  background-color: transparent;

  border-color: transparent;

  color: white;

  margin-left: 10px;

  margin-top: 4px;

  font-size: 25px;

}



.hamburger:hover {

  color: black;

}



.sidenav-closed {

  width: 65px;

  float: left;

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="sidenav-closed sidenav">

  <button class="hamburger data-disappear">☰</button>

  <div class="icons-only">

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-car"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

  </div>

</div>

edited Nov 21 at 19:44

answered Nov 21 at 18:40

hungerstar

15.7k32645

It is actually the .data-icon that should have text-align: center;, but since that property is inherited it still works, and it is not recommended to rely on inheritance as if this change, your solution will stop working. In addition they are floated, which you say nothing about (and the reason they are left aligned)
– LGSon
Nov 21 at 18:47

.text-align:center; on .data-icon would work. As for the inheritance "issue", I would say that's subjective and depends on the fluidity of the project/markup going forward. Though not a bad idea. In my example the icons are not floated, removing text-align: center; yields the same results as the OP's example.
– hungerstar
Nov 21 at 19:42

add a comment |

up vote
0
down vote

The icons are inline elements so they will be left aligned by default. Add in that the icons are not that same size (this is normal), you get an uneven alignment.

To remedy this, add text-align: center to .icons-only.

Note: Given the layout in the example, it does not appear necessary to float .data-icon to the left.

.sidenav {

  height: 492px;

  width: 300px;

  background-color: #db3d44;

}



.icons-only { 

  text-align: center;

}



.data-icon {

  color: rgba( 0, 0, 0, 0.5 );

  font-size: 45px;

}



.hamburger {

  background-color: transparent;

  border-color: transparent;

  color: white;

  margin-left: 10px;

  margin-top: 4px;

  font-size: 25px;

}



.hamburger:hover {

  color: black;

}



.sidenav-closed {

  width: 65px;

  float: left;

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="sidenav-closed sidenav">

  <button class="hamburger data-disappear">☰</button>

  <div class="icons-only">

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-car"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

  </div>

</div>

edited Nov 21 at 19:44

answered Nov 21 at 18:40

hungerstar

15.7k32645

It is actually the .data-icon that should have text-align: center;, but since that property is inherited it still works, and it is not recommended to rely on inheritance as if this change, your solution will stop working. In addition they are floated, which you say nothing about (and the reason they are left aligned)
– LGSon
Nov 21 at 18:47

.text-align:center; on .data-icon would work. As for the inheritance "issue", I would say that's subjective and depends on the fluidity of the project/markup going forward. Though not a bad idea. In my example the icons are not floated, removing text-align: center; yields the same results as the OP's example.
– hungerstar
Nov 21 at 19:42

add a comment |

up vote
0
down vote

The icons are inline elements so they will be left aligned by default. Add in that the icons are not that same size (this is normal), you get an uneven alignment.

To remedy this, add text-align: center to .icons-only.

Note: Given the layout in the example, it does not appear necessary to float .data-icon to the left.

.sidenav {

  height: 492px;

  width: 300px;

  background-color: #db3d44;

}



.icons-only { 

  text-align: center;

}



.data-icon {

  color: rgba( 0, 0, 0, 0.5 );

  font-size: 45px;

}



.hamburger {

  background-color: transparent;

  border-color: transparent;

  color: white;

  margin-left: 10px;

  margin-top: 4px;

  font-size: 25px;

}



.hamburger:hover {

  color: black;

}



.sidenav-closed {

  width: 65px;

  float: left;

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="sidenav-closed sidenav">

  <button class="hamburger data-disappear">☰</button>

  <div class="icons-only">

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-car"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

  </div>

</div>

edited Nov 21 at 19:44

answered Nov 21 at 18:40

hungerstar

15.7k32645

The icons are inline elements so they will be left aligned by default. Add in that the icons are not that same size (this is normal), you get an uneven alignment.

To remedy this, add text-align: center to .icons-only.

Note: Given the layout in the example, it does not appear necessary to float .data-icon to the left.

.sidenav {

  height: 492px;

  width: 300px;

  background-color: #db3d44;

}



.icons-only { 

  text-align: center;

}



.data-icon {

  color: rgba( 0, 0, 0, 0.5 );

  font-size: 45px;

}



.hamburger {

  background-color: transparent;

  border-color: transparent;

  color: white;

  margin-left: 10px;

  margin-top: 4px;

  font-size: 25px;

}



.hamburger:hover {

  color: black;

}



.sidenav-closed {

  width: 65px;

  float: left;

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="sidenav-closed sidenav">

  <button class="hamburger data-disappear">☰</button>

  <div class="icons-only">

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-car"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

  </div>

</div>

.sidenav {

  height: 492px;

  width: 300px;

  background-color: #db3d44;

}



.icons-only { 

  text-align: center;

}



.data-icon {

  color: rgba( 0, 0, 0, 0.5 );

  font-size: 45px;

}



.hamburger {

  background-color: transparent;

  border-color: transparent;

  color: white;

  margin-left: 10px;

  margin-top: 4px;

  font-size: 25px;

}



.hamburger:hover {

  color: black;

}



.sidenav-closed {

  width: 65px;

  float: left;

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="sidenav-closed sidenav">

  <button class="hamburger data-disappear">☰</button>

  <div class="icons-only">

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-car"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

  </div>

</div>

.sidenav {

  height: 492px;

  width: 300px;

  background-color: #db3d44;

}



.icons-only { 

  text-align: center;

}



.data-icon {

  color: rgba( 0, 0, 0, 0.5 );

  font-size: 45px;

}



.hamburger {

  background-color: transparent;

  border-color: transparent;

  color: white;

  margin-left: 10px;

  margin-top: 4px;

  font-size: 25px;

}



.hamburger:hover {

  color: black;

}



.sidenav-closed {

  width: 65px;

  float: left;

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="sidenav-closed sidenav">

  <button class="hamburger data-disappear">☰</button>

  <div class="icons-only">

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-car"></i>

    </div>

    <div class="data-icon">

      <i class="fa fa-home"></i>

    </div>

  </div>

</div>

edited Nov 21 at 19:44

answered Nov 21 at 18:40

hungerstar

15.7k32645

edited Nov 21 at 19:44

answered Nov 21 at 18:40

hungerstar

15.7k32645

answered Nov 21 at 18:40

hungerstar

15.7k32645

answered Nov 21 at 18:40

hungerstar

15.7k32645

It is actually the .data-icon that should have text-align: center;, but since that property is inherited it still works, and it is not recommended to rely on inheritance as if this change, your solution will stop working. In addition they are floated, which you say nothing about (and the reason they are left aligned)
– LGSon
Nov 21 at 18:47

.text-align:center; on .data-icon would work. As for the inheritance "issue", I would say that's subjective and depends on the fluidity of the project/markup going forward. Though not a bad idea. In my example the icons are not floated, removing text-align: center; yields the same results as the OP's example.
– hungerstar
Nov 21 at 19:42

add a comment |

It is actually the .data-icon that should have text-align: center;, but since that property is inherited it still works, and it is not recommended to rely on inheritance as if this change, your solution will stop working. In addition they are floated, which you say nothing about (and the reason they are left aligned)
– LGSon
Nov 21 at 18:47

.text-align:center; on .data-icon would work. As for the inheritance "issue", I would say that's subjective and depends on the fluidity of the project/markup going forward. Though not a bad idea. In my example the icons are not floated, removing text-align: center; yields the same results as the OP's example.
– hungerstar
Nov 21 at 19:42

It is actually the .data-icon that should have text-align: center;, but since that property is inherited it still works, and it is not recommended to rely on inheritance as if this change, your solution will stop working. In addition they are floated, which you say nothing about (and the reason they are left aligned)
– LGSon
Nov 21 at 18:47

.text-align:center; on .data-icon would work. As for the inheritance "issue", I would say that's subjective and depends on the fluidity of the project/markup going forward. Though not a bad idea. In my example the icons are not floated, removing text-align: center; yields the same results as the OP's example.
– hungerstar
Nov 21 at 19:42

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl