My float div contain just text and i want to align it vertically at the middle
HTML:
<div>CC</div>
I try this
div {
height: 100px;
border: 1px solid;
float: left; /* this element is necessary for my big other code so i have to keep it */
vertical-align: middle;
}
But it didn't work, how can i fix it ? here's a FIDDLE
You can use display:table-cell; to accomplish this. Like so:
HTML:
<div id="container">
<div class="content">CC</div>
</div>
CSS:
#container {
height:100px;
width:100%;
border:1px solid;
display:table;
}
.content {
text-align:center;
display:table-cell;
vertical-align:middle;
}
Updated Fiddle
Use display: table-cell and vertical-align: middle :)
div {
height: 100px;
border: 1px solid;
vertical-align: middle;
display:table-cell;
}
Fiddle
If you have a single word or a short line of text, you could simply use the following CSS:
div {
height: 100px;
line-height: 100px;
vertical-align: middle;
float: left;
border: 1px solid blue;
}
Set the line-height to be the same as the height and then apply vertical-align: middle, works well if you have a single line of text.
See demo at: http://jsfiddle.net/audetwebdesign/2En98/
You can use text-align property instead of vertical-align then use "center" as value;
Simply as follows:
div {
text-align: center;
}
Related
I searched over Stackoverflow though many posts but I didn't found the solution.
I'm trying to align my text vertically, using margin: auto;
It seems there is a margin collapsing problem, if you wanna check this example:
// HTML
<div class="outer">
<div class="inner">Hello</div>
</div>
<div class="outer2">
<div class="inner">Trying to center this text vertically</div>
</div>
// CSS
.inner {
margin: auto 0;
height: 20px;
color: white;
}
.outer {
background-color: red;
}
.outer2 {
background-color: blue;
height: 200px;
}
If you want to play on my code, click here
I don't believe there's a good way to vertically align content using margin: auto 0 like you've set it up. To get the inner divs vertically centered, here's a simple way by modifying .inner:
.inner {
height: 200px;
color: white;
line-height: 200px;
}
The display does the magic. Display: table-cell on inner and display: table on outer div. And finally on inner div you put vertical-align: middle or whatever position that you want.
.inner {
display: table-cell;
vertical-align: middle;
height: 20px;
color: white;
}
.outer2 {
text-align: center;
background-color: blue;
height: 200px;
display: table;
width: 100%;
}
I would advise you to use flexbox
add this to outer2 class
.outer2 {
background-color: blue;
height: 200px;
display:flex;
align-items:center;
}
And for horizontal align you can use justify-content:center
align-item:center will align items in center of div vertically ,
.outer2 {
display: flex;
justify-content: center, left;
background-color: blue;
height: 200px;
}
you are trying to align the entire inner div by giving margin:auto. You can use text-align: center if you want to align the text. If you need to align the entire div then mention height and width for inner div. I have posted fiddle link please check
http://jsfiddle.net/ajaycoder/n1rz0bts/4/
.inner {
margin: auto ;
color: white;
width:50%;
border: solid 1px red;
height:50%;
}
How do I implement this layout (which is build using a table) with DIVs?
Basically I want to have two divs on the same line: Div1 and Div2. Div1 should be aligned to the left, Div2 – to the right. Div2 has also minimal width being set. When the width is not enough for both of them then Div1 one must wrap its content giving space to Div2. Whatever I have tried the Div2 always was moved under the Div1 before the content of Div1 was wrapped.
So I came up with solution made with a table. How to build same layout using DIVs?
Solution with a table:
<!DOCTYPE html>
<html>
<head>
<style>
#table {
width: 100%;
word-wrap: break-word;
}
#div1 {
border: 1px solid red;
}
#div2 {
width: 30%;
min-width: 250px;
text-align: right;
border: 1px solid green;
}
</style>
</head>
<body>
<table id="table">
<tr>
<td id="div1">This text should wrap when window is made smaller.
<td id="div2">This takes 30% but not less than 250px;
</table>
</body>
</html>
HTML:
<div id="wrapper">
<div id="left"></div>
</div id="right"></div>
</div>
CSS:
#wrapper {
width: 100%;
float: left;
}
#left {
border: 1px solid red;
float: left;
}
#right {
width: 30%;
min-width: 250px;
text-align: right;
border: 1px solid green;
float: left;
}
Didn't test it, but it shall work.
Regards.
Is this something you were looking for? http://jsfiddle.net/fFkNW/3/
I changed the markup to use divs and updated the CSS to use floats
If you make the window smaller, you can see the red box start to wrap around the green box.
HTML
<div id="div2">This takes 30% but not less than 250px.</div>
<div id="div1">This text should wrap when window is made smaller.</div>
CSS
#div1 {
border: 1px solid red;
}
#div2 {
width: 30%;
min-width: 250px;
float: right;
border: 1px solid green;
}
Try taking a look at CSS box-flex.
One of the most high fidelity ways to do this would be to simply use divs displayed as a table:
#table {
width: 100%;
word-wrap: break-word;
display: table;
}
#table > div {
display: table-row;
}
#div1, #div2 {
display: table-cell;
}
You can see here that it looks exactly the same.
How do I verically center the content of floating div (which height I don't know)?
There is very simple HTML and CSS (see this fiddle: http://jsfiddle.net/DeH6E/1/)
<div class="floating">
This should be in the middle
</div>
.floating {
height: 100px;
float: left;
border: 1px solid red;
vertical-align: middle;
}
How do I make the sentence "This should be in the middle" appear really in the middle (vertically centered)? vertical-align: middle does not seem to work. I have tried display: table-cell and it didn't work either. What's the best way to solve this issue? I'd like to avoid inserting any other HTML tags, do it just via CSS.
(Just to make it clear: I don't know the actual height of the container, 100px is just for the example)
EDIT: I'd like you to understand me, so... Always when I design web page, I follow the rule that HTML holds the content and CSS is responsible for the visual style. I never mix them up together or use one just to enable the other. In this case, I want to stick with this rule too. I don't want to insert HTML element just for the CSS.
The others are right, you need to nest two DOM elements which gives you more options controlling the centering. Here's the code:
.floating {
display: table;
float: right;
height: 200px;
width: 400px;
border: 1px solid red;
}
.floating p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="floating">
<p>This is the proper way that validates and breaks across multiple
lines, if the text is longer than just a few words and still
should be vertically centered. Here, it's also horizontally
centered for added joy.</p>
</div>
Add the text inside a <p>.
HTML
<div class="floating">
<p>This should be in the middle</p>
</div>
CSS
.floating {
height: 100px;
border: 1px solid #f00;
display: table-cell;
vertical-align: middle;
}
If you know the height, then
line-height:100px;
If not, use javascript to set line-height after rendering.
http://jsfiddle.net/DeH6E/4/
I was also looking for a solution to this and eventually came up with this:
http://jsfiddle.net/w6j9mgjp/1/
.floating {
height: 100px;
float: left;
border: 1px solid red;
}
.floating::before {
content: "a";
display: block;
visibility: hidden;
height: 50%;
margin-top: -.7em;
}
it only works for a single line of text, though.
http://jsfiddle.net/DeH6E/2/
the text inside of your div needs to be in its own div tag, and that div tag needs to be set to display:table-cell; and vertical-align:middle; while your .floating div needs to be set as display:table;
or you can set a p tag or some other sort of formatting tag in there to contain your text, eg span, or p
Just play with the pseudo selector.
.floating {
height: 100px;
float: left;
border: 1px solid red;
}
.floating::before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
I want my block to be set by line-height (just like i do with text). As i know i should use display: inline-block in this case, but this doesn't work for me. Why?
HTML:
<div class="block">
<div></div>
</div>
<div class="block">
test
</div>
CSS:
.block {
line-height: 50px;
height: 50px;
width: 50px;
border: 1px solid black;
}
.block div {
height: 40px;
width: 28px;
background-color: #f0f;
display: inline-block;
}
Live demo: jsFiddle
hi now add your div aertical-align middle in your css
.block div {
vertical-align: middle;
}
Demo
--------------------------------------------
now if you want to center this box than add text-align center as like this
.block {
text-align: center;
}
Demo
i guess you are trying to center the purple block vertical?
in that case your mixing thing up:
a <div> is a block-level element, where text is not. so if you say line-height, you specify text-alignment of the content for that element, not positioning of a block element, to solve the centering of that purple block, use padding or margin:
.block div {
height: 40px;/* 50 - 40 = 10pixel/2 = 5px space */
width: 28px;
background-color: #f0f;
margin-top: 5px;
}
Demo over here jsFiddle
Please Check out the fiddle on http://jsfiddle.net/Qu63T/1/
What I want is The green div to float next to the blue one. and the .block divs to appear as a grid. I don't want to remove the .m div and float the .blocks inside the container. What Can be done without specifying width of .m
No JavaScript Only CSS Solution
You can add a a wrapper div, after .m and before .block and set his width:
<div class="m">
<div class="wrapper">
<div class="block">
(...)
</div>
</div>
</div>
Style:
.wrapper{
width:100px;
}
Or you can add some padding in .m, so the blocks will line-break. But that's a wierd solution.
as i understand your question that you want floated div's work like block div's
your
CSS:
.
block{
border: 1px solid white;
float: left;
display: inline-block;
clear:left;
}
check this http://jsfiddle.net/sandeep/Qu63T/6/
Your best solution in this case would be to assume that "m" isnt floating, its just a padded div sitting inside a bigger container, and the blue div is living absolutely positioned, like this:
.c{
background-color: red;
display: block;
position: relative;
overflow: hidden;
}
.l{
background-color: blue;
height: 40px;
width: 120px;
display: inline-block;
position: absolute;
left: 0;
right:0;
}
.m{
display: block;
position: relative;
margin-left: 125px;
}
.block{
border: 1px solid white;
float: left;
display: inline-block;
background-color: green;
}
http://jsfiddle.net/Qu63T/7/