jsFiddle: http://jsfiddle.net/2CRZP/
I want to put the grey box in the middle of the screen using vertical-align:middle or something (CSS).
<div class="container-fluid">
<div class="hero-unit">
<h1>Test</h1>
<p>stackoverflow</p>
<p>
<div class="row-fluid">
<div class="span2">BASE CSS</div>
</div>
</p>
</div>
</div>
http://jsfiddle.net/2CRZP/2/
You have to put this:
.container-fluid {
position:absolute;
top:50%;
margin-top:-160px;
}
In the margin-top you have the half of the height div in negative. (If you edit it)
And vertical-align:middle its only for TD tables. ;)
You mean the green box ?! I don't see any gray box
If you want to use vertical-align with divs, try the display:table-cell;
http://phrogz.net/css/vertical-align/
Related
#align_text_center{
height:100%;
display:flex;
}
#aligned_text_h1{
margin:auto;
}
<html>
<body>
<div id="Container1">
<div id="align_text_center">
<h1 id="aligned_text_h1"></h1>
</div>
</div>
<div id="Container2">
<div id="align_text_center">
<h1 id="aligned_text_h1"></h1>
</div>
</div>
</body>
</html>
Welcome! I got again a bit problem while positioning the texts to it's position. I have a h1 element in the center of container1,container2 id's.
I want to align a second(and later a third) text below the first h1 element. I can't say it, so I made an interactive image about it. :(
Thank you for help! :)
I draw an interactive image,click here.
Place all the elements you want to position in the same div, and then position that div, rather than positioning each element separately.
I am trying to place three divs side by side and
fourth div in the next row. I used float:left and width:33%.
What else property I need to apply to achieve this?
https://jsfiddle.net/wdvpubau/
Edit: One more thing regarding the same css styles,
I made property display:inline within css .divinline , but there is no difference in rendering. I had learnt that display:block will occupy the entire row. Is it being overridden?
Another way is as below
<div>
<div style="float:left;width:100px">1</div>
<div style="float:left;width:100px">2</div>
<div style="float:left;width:100px">3</div>
<div style="float:left;width:100px">4</div>
</div>
As rightly suggested by #Imran, you need to remove the . before the css class names while you use them in html. Try:
.divinline{
display:block;
float:left;
width:33%;
}
.maindiv{
display:block;
}
<div class="maindiv">
<div class="divinline"> <!-- here the class is class="divline" and not .divline -->
HI
</div>
<div class="divinline">
HI
</div>
<div class="divinline">
HI
</div>
<div class="divinline">
HI
</div>
</div>
Fiddle here : https://jsfiddle.net/nithin_krishnan/r0Lyydg8/
First I'd like to say that I know very little about coding.
In this website I made http://academiadae.com, I added two small divs at each side, so I could get a div class="6u" centered.
<div class="row">
<div class="3u"></div>
<div class="6u"><img src="images/logo.png" /></div>
<div class="3u"></div>
</div>
Can you help me to get it centered without the need for the other divs?
I tried making different elements =center in the CSS, but it didn't work.
Thanks.
First of all, your are using as class 6u which will not be selected. A CSS name must begin with an underscore (_), a hyphen (-), or a letter(a–z) to use it as an CSS selector. You can check this page for any reference.
Second if you want to have the a single div centered you could apply this:
<div class="row">
<div class="item6u">
test
</div>
</div>
Where there is only one div with a class name that starts with a letter.
For you CSS you need to set the width of the div and like #Sprazer told you need to set the margin:
.row{
background-color:yellow;
}
.item6u{
background-color:red;
width:50%; //changed to 50% percentage as wawa suggested
margin:0 auto;
text-align:center;
}
See code here: JSFIDDLE.
So, you currently have something like: HTML
<div class="row">
<div class="3u">
</div>
<div class="6u">
<img src="images/logo.png">
</div>
<div class="3u">
</div>
</div>
and CSS:
div.6u{
width: 50%;
clear: none;
float:left;
margin-left: 0;
}
You need to change this to HTML:
<div class="row>
<div class="6u">
...contents of the div here...
</div>
</div>
and CSS (note: do remove float:left, otherwise it will not work):
div.6u{
width:50%;
clear:none;
margin-left:auto;
margin-right:auto;
}
Cannot center div tried floating it and using text-align:center; margin:auto doesn't work please help me I can't figure this out. I will paste the code and a link for the jfiddle.
It looks fine in Jfiddle but it actually isn't I don't know why. I'm using Chrome
Fiddle
<div class="wrap">
<div class="top_portion">
<div class="logo">
<img src="img/2a685fsaq.png"/>
</div>
</div>
<div class="center">
<div class="cleft_portion">
<img src="img/5.png" />
</div>
<div class="mid_portion">
<img src="img/css.png" />
</div>
<div class="cright_portion">
</div>
</div>
<div class="bottom_portion">
</div>
</div>
I think i gave the same solution, in this question of your Can't get right portion of middle to stay on the right ...considering your markup display:table is a better option (if you can ignore IE8-)
display:table is compatible(IE8+) overall with minimal css
see demo here
HTML
<div class="center" style="display:table">
<div class="cleft_portion" style="display:table-cell">
</div>
<div class="mid_portion" style="display:table-cell">
</div>
<div class="cright_portion" style="display:table-cell">
</div>
</div>
I have removed the floats and added table display...its better if you are looking for IE8+ browsers!!
EDIT
considering your current markup, these might be faults
.center {
margin: 0 auto; /* u have mentioned only auto here */
width:1200px;
}
and add this on top of your css :
html, body {
width:100%;
height:100%;
}
working demo
make the width 100%
go to that div you want to center and write:
width:100%
or play a bit with the widths so that it centers itself
Leave text-align:center and margin:auto;
if it's still not centered you can always play with margin-right/left as long as it UNDER the margin: 0 auto;
also if you are going to do a float best have:
overflow:hidden;
and play with the height as not to have overlappings
text-align:center will not work as you are using images in your code.
if you wish to use margin:0 auto you should have to give a width to the container which you want to be in center, as the container by default takes the width of the container and margin:0 auto applied cant be seen.
I have design like this :
<div id='container'>
<div class='box'>
<div class='boxleft'>something left</div>
<div class='boxright'>something right</div>
<div class='clear'/>
</div>
</div>
And I set CSS as :
*{margin:0; padding:0}
.clear{clear:both}
#container{width:100%; height:auto; background:#f1f2f3}
.box{width:95%; margin:0 auto; height:auto; background:white}
.boxleft{float:left;width:49%;margin-right:1%;}
.boxright{float:right;width:50%;}
Problem: Background is white of class .box be load later after class .boxleft finished the loading. I now want it load background follow the height of class .boxleft. So, How can I do this?
Thank for your suggestion.
Your problem is a result of the float left and float right without having an height on both boxes inside the main box. Add this to your .boxleft and .boxright:
display:block
That should work.