Aligning Three Elements (left/center/right) Inside A Container
Solution 1:
You can build the layout with CSS flexbox.
For clarity and conciseness, I removed several non-essential decorative styles from the original code. I also used compiled CSS for the benefit of those who don't use preprocessors.
layout 1: [left] [center] [right]
#header-wrap {
display: flex; /* 1 */align-items: flex-start; /* 2 */justify-content: space-between; /* 3 */text-align: center;
padding: 1rem0;
}
#header-blue { margin-bottom: 50px; background-color: #3498DB; color: #fff; }
.header-left { border: 1px solid red; width: 100px; }
.header-right { border: 1px solid red; width: 100px; }
.header-center { border: 1px solid red; width: 100px; }<sectionid="header-blue"><divid="header-wrap"><divclass="header-left"><p>1</p></div><divclass="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div><divclass="header-right"><p>3</p><p>3</p></div></div></section>Notes:
- Establish flex container.
- Prevent flex items from expanding full height (a default setting). The
flex-startvalue will align each item at the start of the cross axis of the container. In this case, that's the top of the vertical (Y) axis. If you want the items vertically centered, use thecentervalue instead. The default value isstretch. - Align flex items horizontally in the container. You can also try
justify-content: space-around. Note that this method will only center the middle item in the container if the left and right elements (the back/forward links) are equal width. If the links vary in length, you'll need to use another method (see boxes #71-78 here).
layout 2: [left] [center]
#header-wrap::after { /* 4 */content: "";
width: 100px;
}
#header-wrap {
display: flex; /* 1 */align-items: flex-start; /* 2 */justify-content: space-between; /* 3 */text-align: center;
padding: 1rem0;
}
#header-blue { margin-bottom: 50px; background-color: #3498DB; color: #fff; }
.header-left { border: 1px solid red; width: 100px; }
.header-right { border: 1px solid red; width: 100px; }
.header-center { border: 1px solid red; width: 100px; }<sectionid="header-blue"><divid="header-wrap"><divclass="header-left"><p>1</p></div><divclass="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div></div></section>Notes:
- Use an invisible pseudo-element to create equal balance on the opposite end of the container. This is essentially a replacement for the DOM element that was removed from the first example. It keeps the middle item centered.
jsFiddle
Browser Support
Flexbox is supported by all major browsers, except IE 8 & 9.
Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes.
For a quick way to add all the prefixes you need, use Autoprefixer.
More details in this answer.
Solution 2:
From your structure you could use flex(IE11) and justify-content, then hide .clearfix and remove it when on fourth position:
with 3 (4 including clearfix)
#header-wrap {
display: flex;
justify-content: space-between;
}
#header-wrap > div {
border: solid;
width: 100px;
margin:00 auto;/* remove if you want each boxes same height */
}
.clearfix:nth-child(4) {
display: none;
}
.clearfix {
opacity: 0;
}<sectionid="header-blue"><divid="header-wrap"><divclass="header-left"><p>1</p></div><divclass="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div><divclass="header-right"><p>3</p><p>3</p></div><divclass="clearfix"></div></div></section>when only 2 (3)same CSS involved
#header-wrap {
display: flex;
justify-content: space-between;
}
#header-wrap > div {
border: solid;
width: 100px;
margin:00 auto;/* remove if you want each boxes same height */
}
.clearfix:nth-child(4) {
display: none;
}
.clearfix {
opacity: 0;
}<sectionid="header-blue"><divid="header-wrap"><divclass="header-left"><p>1</p></div><divclass="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div><divclass="clearfix"></div></div></section>for older browsers.
with your structure you could use text-align, :after and the selector +:
with 3 (4)
#header-wrap {
text-align: justify;
}
#header-wrap:after {
content: '';
display: inline-block;
width: 99%;
}
#header-wrap > div {
display: inline-block;
vertical-align: top;
border: solid;
width: 100px;
}
#header-wrap > div + div + div +.clearfix {
display: none;
}
.clearfix {
opacity: 0;
}<sectionid="header-blue"><divid="header-wrap"><divclass="header-left"><p>1</p></div><divclass="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div><divclass="header-right"><p>3</p><p>3</p></div><divclass="clearfix"></div></div></section>and 2(3)same CSS involved:
#header-wrap {
text-align: justify;
}
#header-wrap:after {
content: '';
display: inline-block;
width: 99%;
}
#header-wrap > div {
display: inline-block;
vertical-align: top;
border: solid;
width: 100px;
}
#header-wrap > div + div + div +.clearfix {
display: none;
}
.clearfix {
opacity: 0;
}<sectionid="header-blue"><divid="header-wrap"><divclass="header-left"><p>1</p></div><divclass="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div><divclass="clearfix"></div></div></section>Solution 3:
Consider positioning the left and right elements differently.
https://jsfiddle.net/5gxLvp8a/4/
#header-wrap {
text-align: center;
border: 1px solid green;
margin: 0 auto;
padding: 1rem2.5rem;
position: relative;
div {
display: inline-block;
vertical-align: middle;
}
}
.header-left {
float: left;
border: 1px solid red;
width: 100px;
position: absolute;
left: 25px;
}
.header-right {
float: right;
border: 1px solid red;
width: 100px;
position: absolute;
right: 25px;
}
See code snippet below:
html, htmla {
font-size: 10px; }
#header-blue {
width: 100%;
margin-bottom: 50px;
height: auto;
background-color: #3498DB;
color: #fff; }
#header-blue#header-wrap {
text-align: center;
border: 1px solid green;
margin: 0 auto;
padding: 1rem2.5rem;
position: relative; }
#header-blue#header-wrapdiv {
display: inline-block;
vertical-align: middle; }
#header-blue.header-left {
float: left;
border: 1px solid red;
width: 100px;
position: absolute;
left: 25px; }
#header-blue.header-right {
float: right;
border: 1px solid red;
width: 100px;
position: absolute;
right: 25px; }
#header-blue.header-center {
border: 1px solid red;
margin: 0 auto !important;
display: inline-block;
width: 100px; }
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both; }<sectionid="header-blue"><divid="header-wrap"><divclass="header-left"><p>1</p></div><divclass="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div><divclass="header-right"><p>3</p><p>3</p></div><divclass="clearfix"></div></div></section><sectionid="header-blue"><divid="header-wrap"><divclass="header-left"><p>1</p></div><divclass="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div><divclass="clearfix"></div></div></section>Solution 4:
Widely supported - my immediate answer is to use display: table;
Let me 'fiddle' around with this for a moment and get back to you - I was just working on something similar yesterday.
EDIT 1: At first glance, I would advise utilizing classes versus ID's. This deals with a much broader topic (CSS Specificity) but is extremely useful to think about early in your career. That being said, I am working on a solution for you, as I THINK I know what you want.
As the commenter mentioned - it would help ALOT to see what you want to see as an end result. From my interpretation of your screenshots (poor quality & non-descriptive FYI), I feel like you want this header to maintain the left/back button and the logo on mobile devices. However, on a desktop/laptop viewport size, you want a forward button to show itself.
If this is incorrect, please verify!
EDIT 2:
Going off the above poster's JSFiddle, I've come up with a "better" solution that stacks the elements within the header as opposed to going outside of the 'container' that it exists in: https://jsfiddle.net/f815aa6y/1/
Still working on the right solution to get this to vertically align in the middle :)
Post a Comment for "Aligning Three Elements (left/center/right) Inside A Container"