How to keep icons aligned strictly inside div?

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 '18 at 18:27

Smollet777

1,3551015

asked Nov 21 '18 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 '18 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 '18 at 18:52

add a comment |

.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 '18 at 18:27

Smollet777

1,3551015

asked Nov 21 '18 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 '18 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 '18 at 18:52

add a comment |

.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 '18 at 18:27

Smollet777

1,3551015

asked Nov 21 '18 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 '18 at 18:27

Smollet777

1,3551015

asked Nov 21 '18 at 18:13

anwesh mohapatra

346

edited Nov 21 '18 at 18:27

Smollet777

1,3551015

asked Nov 21 '18 at 18:13

anwesh mohapatra

346

edited Nov 21 '18 at 18:27

Smollet777

1,3551015

edited Nov 21 '18 at 18:27

Smollet777

1,3551015

edited Nov 21 '18 at 18:27

Smollet777

1,3551015

asked Nov 21 '18 at 18:13

anwesh mohapatra

346

asked Nov 21 '18 at 18:13

anwesh mohapatra

346

asked Nov 21 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 at 18:52

add a comment |

3 Answers
3

active

oldest

votes

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 '18 at 18:18

Marek Sapiński

1045

add a comment |

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 '18 at 18:28

answered Nov 21 '18 at 18:21

Kamil Kiełczewski

9,65485893

add a comment |

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 '18 at 19:44

answered Nov 21 '18 at 18:40

hungerstar

15.9k42747

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 '18 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 '18 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',
autoActivateHeartbeat: false,
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

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 '18 at 18:18

Marek Sapiński

1045

add a comment |

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 '18 at 18:18

Marek Sapiński

1045

add a comment |

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 '18 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 '18 at 18:18

Marek Sapiński

1045

answered Nov 21 '18 at 18:18

Marek Sapiński

1045

answered Nov 21 '18 at 18:18

Marek Sapiński

1045

answered Nov 21 '18 at 18:18

Marek Sapiński

1045

add a comment |

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 '18 at 18:28

answered Nov 21 '18 at 18:21

Kamil Kiełczewski

9,65485893

add a comment |

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 '18 at 18:28

answered Nov 21 '18 at 18:21

Kamil Kiełczewski

9,65485893

add a comment |

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 '18 at 18:28

answered Nov 21 '18 at 18:21

Kamil Kiełczewski

9,65485893

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 '18 at 18:28

answered Nov 21 '18 at 18:21

Kamil Kiełczewski

9,65485893

edited Nov 21 '18 at 18:28

answered Nov 21 '18 at 18:21

Kamil Kiełczewski

9,65485893

answered Nov 21 '18 at 18:21

Kamil Kiełczewski

9,65485893

answered Nov 21 '18 at 18:21

Kamil Kiełczewski

9,65485893

add a comment |

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 '18 at 19:44

answered Nov 21 '18 at 18:40

hungerstar

15.9k42747

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 '18 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 '18 at 19:42

add a comment |

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 '18 at 19:44

answered Nov 21 '18 at 18:40

hungerstar

15.9k42747

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 '18 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 '18 at 19:42

add a comment |

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 '18 at 19:44

answered Nov 21 '18 at 18:40

hungerstar

15.9k42747

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 '18 at 19:44

answered Nov 21 '18 at 18:40

hungerstar

15.9k42747

edited Nov 21 '18 at 19:44

answered Nov 21 '18 at 18:40

hungerstar

15.9k42747

answered Nov 21 '18 at 18:40

hungerstar

15.9k42747

answered Nov 21 '18 at 18:40

hungerstar

15.9k42747

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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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.

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

搜尋此網誌

Nsryjdtyk