CODEWITHSUNDEEP
htmlcss
user606521
user606521

Reputation: 15434

How to align label vetically without using max-width?

Here is fiddle: https://jsfiddle.net/udyzyoq6/

HTML (for failing example):

<div class="parent">
  <div class="square"></div>
  <label class="label">
    Long label text, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum
  </label>
</div>

CSS (for failing example):

.parent {
    width: 300px;
    border: solid 1px red;
}

.square {
    width: 15px;
    height: 15px;
    background-color: blue;
    display: inline-block;
    vertical-align: middle;
}

.label {
    display: inline-block;
    vertical-align: middle;
}

enter image description here

I DON'T want to set max-width on label - I just want it to automatically use all available space of .parent (300px-15px). In my example, if I wont set max-width on label then long text breaks layout (as in red frame).

Edit: I don't want to set any fixed width on any element except .parent (width=300px) and .square (width=15px, height=15px). I want it to automatically/dynamically adjust to .parent container width.

Upvotes: 1

Views: 81

Answers (3)

Dmitriy
Dmitriy

Reputation: 4503

use display: table

.parent {
    width: 300px;
    border: solid 1px green;
    display: table;
}

.parent.error-frame {
    border-color: red;
}
.parent > div{
    display: table-cell;
}
.parent > div:nth-of-type(1){
    vertical-align: middle;
}
.square {
    width: 15px;
    height: 15px;
    background-color: blue;
    display: inline-block;
    vertical-align: middle;
}
.label {
    display: inline-block;
    vertical-align: middle;    
    padding-left: 5px;
}
<div class="parent">
    <div>
        <div class="square"></div>
    </div>
     <div>
         <label class="label">Long label text, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum</label>         
     </div>   
</div>
<br>
<div class="parent">
    <div>
        <div class="square"></div>
    </div>
     <div>
         <label class="label">Long label text, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum</label>         
     </div>   
</div>

Upvotes: 3

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

You can achieve this layout by using flexbox:

  • Add display: flex; to .parent, this tells its children to use the flexbox model
  • Add align-items: center; to .parent, this will vertically align the children
  • Add flex: 1; to .label-without-max-width, this will tell it to take up as much space as necessary

.parent {
  align-items: center;
  border: solid 1px green;
  display: flex;
  width: 300px;
}
.parent.error-frame {
  border-color: red;
}
.square {
  background-color: blue;
  height: 15px;
  width: 15px;
}
.label {
  max-width: 250px;
}
.label-without-max-width {
  flex: 1;
  max-width: none;
}
<div class="parent">
  <div class="square"></div>
  <label class="label">Long label text, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum</label>
</div>
<br>
<div class="parent error-frame">
  <div class="square"></div>
  <label class="label label-without-max-width">Long label text, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum</label>
</div>

Support for flexbox is pretty good (minus older versions of IE) http://caniuse.com/#feat=flexbox

Upvotes: 2

9Deuce
9Deuce

Reputation: 676

You don't need to set a max-width. Since you're using set pixel widths, just set a width on the label class to whatever pixel width you need, in this case, 285px.

Fiddle so you can see it.

Upvotes: 2

Related Questions