自适应-将图标和文本对齐菜单项的中心

Question

I have multiple menu items that are displayed horizontally. In each menu item I have a span icon (data-icon) and a text. They are centered with text-align:center. Some menu item texts are long. Everything is OK until I get into smaller screens.

The problem is that when the text breaks to the next line it gets centered inside the menu item container and goes under the icon.

Is there a way to prevent and center item text by itself but also leave Icon and Text centered inside the menu container ?

 .mycontainer { width: 50%; background: green; text-align: center; float: left; } .big-icon { font-size: 40px; } .small-text { font-size: 12px; position: relative; top: -15px; } 

 <div class="menu"> <div class="mycontainer"> <span class="big-icon">Big Icon</span> <span class="small-text">This is very very very very very very very very very long text</span> </div> <div class="mycontainer" style="background: yellow;"> <span class="big-icon">Big Icon</span> <span class="small-text">This is short text</span> </div> </div> 

Answer 1

Try to use Flexbox

Stack Snippet

 .menu { display: flex; flex-wrap: wrap; } .mycontainer { padding: 20px; box-sizing: border-box; width: 50%; background: green; text-align: center; display: flex; align-items: center; flex-direction: row; justify-content: center; } .big-icon { font-size: 40px; flex-shrink: 0; } .small-text { font-size: 12px; position: relative; flex: 0 1 40%; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="menu"> <div class="mycontainer"> <span class="fa fa-address-book-o fa-4x"></span> <span class="small-text">This is very very very very veryveryveryveryverylongtext</span> </div> <div class="mycontainer" style="background: yellow;"> <span class="fa fa-address-book-o fa-4x"></span> <span class="small-text">This is short text</span> </div> </div> 

Answer 2

You could use css grids to make this a lot easier.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; 
}
p {
  grid-column: 3/5;
}
h1 {
  grid-column: 1/3;
}

Answer 3

.menu {
  display: grid
}

.mycontainer {
  display: grid;
  grid-gap: 10px; // adds padding to columns
  grid-template-columns: 1fr 1fr; //defines two columns (1/2 each)
  align-items: center; //Centers children vertically
  justify-items: center; //Centers children horizontally
  background: green
}

.big-icon {
  font-size: 40px
}

.small-text {
  font-size: 12px
}

Here is JSFiddle: jsfiddle

More here: Alligator io aligment tutorial