I am having trouble creating a header with left, right and centered elements - I keep trying but i am unable to get the elements positioned in that specific layout with the title being centered at all times
Can anybody help? I feel that I am close but i can't get it to work!
CODE HERE: https://jsfiddle.net/4a25nqb4/
HTML:
<div class="container">
<div class="top">
<div id="social">
<span class="fa fa-facebook"></span>
<span class="fa fa-instagram"></span>
<span class="fa fa-youtube"></span>
</div>
<p id="website">www.AlmostFreeFurniture.com</p>
<h1 id="title">Almost Free Furniture</h1>
</div>
</div>
CSS:
* {
margin:0 auto;
padding:0px;
}
.top {
height: 40px;
background-color:black;
color:red;
margin-top:4px solid orange;
margin-top:10px;
display: table;
width: 100%;
text-align:center;
}
#social, #website, #title {
display:inline-block;
vertical-align: top;
}
#social {
float:right;
}
#website {
float:left;
}
#title {
text-align: center;
}
The floats effect the amount of available area to center in. Because the item on the left is larger then the right, the center between them is closer to the right. If you'll position the left and right items absolutely, the centering mechanism will ignore them (fiddle):
#social {
position: absolute;
right: 0;
}
#website {
position: absolute;
left: 0;
}
I would use display: flex instead of display: table, and then you can push the #social over to the right with order:
* {
margin:0 auto;
padding:0px;
}
.top {
height: 40px;
background-color:black;
color:red;
margin-top:4px solid orange;
margin-top:10px;
display: -webkit-flex;
display: flex;
width: 100%;
text-align:center;
}
#social, #website, #title {
-webkit-flex: 1;
flex: 1;
vertical-align: top;
}
#website { overflow-x: hidden; }
#social {
text-align: right;
-webkit-order: 1;
order: 1;
}
#title {
text-align: center;
}
https://jsfiddle.net/4a25nqb4/
To give #title more room, you can either give it a flex: 2 or something like flex-basis: 50% or thereabouts.
Set width of this elements to 33.33%
#social, #website, #title {
display:inline-block;
vertical-align: top;
width: 33.33%;
}
Next give text-align for elements left, center and right.
Related
This question already has answers here:
How can I vertically center text in a dynamically height div?
(10 answers)
Closed 7 years ago.
as said in the title all i need is centering vertically a title h1 in the middle of a div.
this is a very simple code :
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
.container{
width:500px;
height:180px;
background-color:red;
text-align:center;
}
h1{
vertical-align:middle;
}
This is a demo here
After using display table, the text is nicely centered vertically, thank you All. Now i'm facing a new problem; (look at the jsffidle here please
What i want is "text 1" and "text 2" will be displayed side by side, and every small blue div goes under the two red divs in the middle of every red div.. any help please ?
Solution #1
Add display:table; to container and display:table-cell; to h1
.container{
width:500px;
height:180px;
background-color:red;
text-align:center;
display:table; /* <---- */
}
h1{
vertical-align:middle;
display:table-cell; /* <--- */
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
display: table;
}
h1 {
vertical-align: middle;
display: table-cell;
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
Solution #2 : Flexbox
.container{
width:500px;
height:180px;
background-color:red;
text-align:center;
display: flex;
align-items: center; /* align vertical */
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
/* align vertical */
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
Solution #3 - Transforms
h1
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
}
h1 {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
Solution #4 Add a Pseudo element with 100% height
.container:before {
content:'';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* to counter inline-block whitespace */
}
h1 {
display: inline-block;
vertical-align: middle;
}
FIDDLE
.container {
width: 500px;
height: 180px;
background-color: red;
text-align: center;
}
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
/* to counter inline-block whitespace */
}
h1 {
display: inline-block;
vertical-align: middle;
}
<div class="container">
<h1> title in multiple lines, so i can't use line-height, i must use something else </h1>
</div>
I want divs to go from left to right but also to be evenly distributed in the content of the page with width: 100%;
Can this be done in CSS without using any JS or Display:Flex which actually allows you to do it with flex-direction .... but its not compatible with IE8 and IE9!
#container {
width: 100%;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#container:after {
content: '';
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
div {
width: 27%;
display: inline-block;
zoom: 1;
position: relative;
background-color:lightblue;
text-align:center;
color:red;
height:100px;
border:1px solid black;
margin: 10px;
}
p {
maring:0;
padding:0;
line-height:80px
}
<div id="container">
<div><p>A</p></div>
<div><p>B</p></div>
<div><p>C</p></div>
<div><p>D</p></div>
<div><p>E</p></div>
<div><p>F</p></div>
<div><p>G</p></div>
<div><p>H</p></div>
</div>
Here is my code.
So basically ... The first div to be always on the left, the 3rd to be always on the right and the one in the middle. But everytime you add a new div it should be added from left to right. Not left > right > middle.
Already have the correct answer from #Sofiene DJEBALI.
Add float:left; to your div in your css :
div {
width: 30%;
display: inline-block;
zoom: 1;
position: relative;
background-color:lightblue;
text-align:center;
color:red;
height:100px;
border:1px solid black;
margin: 10px;
float:left;
}
https://jsfiddle.net/bvgn46hu/28/
I am trying to do a vertical align for my texts. I also want to make sure the green background div need to cover from top to bottom inside the red color div. Currently the green color div only covers 90% of the red oolor div. I am not sure what happened in my case. Can anyone explain and help me out?
html
<div id='wrapper'>
<div class='head'></div>
<h2 class='title'>Warm-Up</h2>
</div>
css
.title{
display: inline;
padding-left: 15px;
vertical-align: middle;
margin: 0;
}
.head{
width: 30px;
height: 50px;
display: inline-block;
background-color: #A9D075;
}
#wrapper{
width:200px;
background-color: red;
}
http://jsfiddle.net/rmS2f/3/
Thanks.
Demo http://jsfiddle.net/rmS2f/6/
Your html structure will work but you need to change the styles:
.title {
display: inline-block;
padding-left: 45px;
vertical-align: middle;
margin: 0;
line-height:50px;
}
.head {
position:absolute;
left:0;
width: 30px;
height: 100%;
display: inline-block;
background-color: #A9D075;
}
#wrapper {
position:relative;
width:200px;
height:50px;
background-color: red;
}
I have tried all methods i could find .. and nothing worked for me...
i just can wrap my head around what is the problem of aligning a div (or a block element) inside another div .. what could be so difficult..
I want to align the green block vertically.
here is the fiddle: http://fiddle.jshell.net/795St/1/
<div class="rtl centerwrapper">
<div class="green-block pull-right"></div>
<div class="green-block pull-right"></div>
<div class="green-block pull-right"></div>
<div>Average</div>
</div>
.green-block {
background-color: #02A556;
margin: 0 .25em 0 .25em !important;
width: 1em;
height: 0.5em;
}
.pull-right {
float: right;
}
.rtl {
direction:rtl;
}
.centerwrapper {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
}
Please .. can any one help .. and explain what am i dooing wrong ?
Edit:
Let me be more clear...
I need all element in one line.
just the blocks needs to be aligned at the vertical middle of the text.
Edit2: here is an image
New Answer
Here is the new fiddle link http://fiddle.jshell.net/795St/16/
CSS
.green-block {
background-color: #02A556;
margin: 0 .25em 0 .25em !important;
width: 1em;
height: 0.5em;
vertical-align: middle;
position: relative;
}
.pull-right {
display: inline-table;
}
.rtl {
direction:rtl;
}
.centerwrapper {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
}
HTML
<div class="rtl centerwrapper">
<div class="green-block pull-right"></div>
<div class="green-block pull-right"></div>
<div class="green-block pull-right"></div>
<div class="pull-right">Average</div>
</div>
Screenshot of output
Old Answer
Here is the required output
http://fiddle.jshell.net/795St/5/
.pull-right {
display: inline-table;
}
.centerwrapper {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
text-align: center;
}
For inner divs I added display as inline-table so that they will not be treated as block element and shown in one line. For the outer div I added text-align as center. SO that it will show the contents in center.
Only 2 changes done to your fiddle.
For inner div instead of float: right I added display:inline-table
And for outer div added text-align:center.
http://fiddle.jshell.net/n234A/
Give your green block an appropriate top margin to make them sit in the middle of the wrapper.
In this demo I gave the wrapper div a red background to show centering better
you can use display:flex to do this : http://codepen.io/gc-nomade/pen/wmECy
html,body {
height:100%;
width:100%;
margin:0;
}
body , body > div{
display:flex;
}
div {
margin:auto;
}
.green-block {
background-color: #02A556;
margin: 0 .25em 0 .25em !important;
width: 1em;
height: 0.5em;
order:4;
}
.first {
flex:1;
order:1;
}
or display:table http://jsfiddle.net/MxE8Y/5/ (includes IE8)
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
div {
display:table;
direction:rtl;
margin:auto;
border-spacing:0.25em;
}
.green-block {
background-color: #02A556;
width: 1em;
height: 0.5em;
display:table-cell;
}
.green-block {
background-color: #02A556;
margin: 6px 10px!important;
width: 1em;
height: 0.5em;
}
Demo
Is it ok ?
.centerwrapper div:last-child{
margin-top:-8px;
}
You must display all divs as inline-blocks
.centerwrapper div {
display: inline-block;
}
HTML Code
Average
and CSS
.green-block {
background-color: #02A556;
margin: 0 .25em 0 .25em !important;
width: 1em;
height: 0.5em;
margin:10px!important;
list-style:none;
}
.pull-right {
float: right;
}
.rtl {
direction:rtl;
}
.centerwrapper {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
}
.clear{
clear:both;
}
use this.and give margin at what size you want
I have following HTML for a heading. The .left and .right are empty spans. I have specific width for the .left and but the .text width is not always same. I want to set the background for the .left (fixed width) and the .right. The .right should get all the remaining space in the parent element (h1). How that can be done?
<h1>
<span class="left"></span>
<span class="text">Text</span>
<span class="right"></span>
</h1>
I'm trying following CSS which does not work:
.left{
background: yellow;
width: 30px;
height: 20px;
display: inline-block;
}
.right{
display: inline-block;
background: blue;
}
Here's the JSFiddle link:
http://jsfiddle.net/jMR8u/
Here's what I'm trying to get:
The idea is to set a background image in h1 except the .text span and the problem is that I can not set the background for the .text, otherwise it would be easier.
This version will stretch to fit the contents of .text and should be cross-browser.
You can fake the blue (right) background by making it a border of .text:
.text { border-right: 1000px solid; }
Then, shift .right to the left by 1000px:
.right { margin-left: -1000px; }
Give a width to .left, make each element inline-block, hide the extra blue border on the right, and make sure .text and .right do not wrap to a new line:
.left { width: 200px; }
.left, .text, .right { display: inline-block; }
h1 { overflow: hidden; white-space: nowrap; }
And give it color!
body { background: green; }
.left { background: red; }
.text { border-color: blue; }
Here is a JSFiddle demonstration:
if i interpret your image correct .. this is the answer http://jsfiddle.net/jMR8u/4/
h1{
border: 1px solid red;
position: relative;
}
.left{
background: yellow;
width: 30px;
height: 20px;
display: inline-block;
}
.right{
display: inline-block;
background: blue;
position: absolute;
z-index: 99;
height: 20px;
width: 100%;
}
.text {
height: 20px;
width: 150px;
display: inline-block;
position: relative;
z-index; 101;
}
ok, then use layers .. with z-index and positioning
You could use flexbox (but use the new syntax). Sadly, it only works on Chrome and Opera for now, so this has limited usefulness:
h1 { display: -webkit-flex; display: flex; }
.left { width: 30px; }
.right { flex: 1; -webkit-flex: 1; } /* This makes it fluid. */
.left { background: yellow; }
.right { background: blue; }
Here is a JSFiddle demonstration: http://jsfiddle.net/FN7vQ/
if you can set width to the .text span and h1 element.
body{
background:green;
}
h1{
border: 1px solid red;
display:table;
width:100%;
}
.left{
background: yellow;
width: 30px;
display: table-cell;
}
.right{
display: table-cell;
background: blue;
}
.text {
display:table-cell;
width: 150px;
}
If I understood your requirement correctly. you should change your markup a little bit as below
h1 {
background: #660000;
padding-left: 30px;
line-height: 1.1;
}
h1 span {
background: #fff;
padding: 0 3px;
color: #600;
}
<h1>
<span>
Lorem, ipsum dolor. you are doing great
</span>
</h1>
and CSS goes here below