I want to know how to center a div with CSS. I googled some stuff & checked on stackoverflow but it was conflicting with my CSS code.
Here's my code (just in case):
body, p, span, div {
font-family: 'Droid Sans', arial, serif;
font-size:12px;
line-height:18px;
color:#6d6d6d; }
.countdown {
padding-top:15px; width: 100%;
height: 68px;
margin:0 auto 0 auto;
bottom:0;
position:absolute;
}
.countdown .countdown_section{
background:url('images/backcountdown.png') no-repeat 1px top;
float:left;
height:100%;
width:54px;
margin:0 5px;
text-align:center;
line-height:6px;
}
.countdown .countdown_amount {
font-size:15px;
color:#ab7100;
text-shadow:0 0.8px #fedd98;
line-height:52px;
font-weight:bold;
text-align: left;
}
.countdown span {
font-size:8px;
color:#999999;
text-transform:uppercase;
line-height:26px;
}
<body>
<div class="countdown clearfix">
</div>
</body>
The following automatically centers the element horizontally:
margin: 0 auto;
You can center a div with a specific width using the following css:
#yourDiv {
width: 400px;
margin: 0 auto;
}
Provided fixed width is set, and you put a proper DOCTYPE,
Do this:
Margin-left: auto;
Margin-right: auto;
Hope this helps
To center a div use:
#content{
margin: 0 auto;
}
<div id="content">This will be centered horizontally</div>
<div style="margin:auto; width: 100px;">lorem</div>
The above answers will work for divs with relative or static positioning. For absolutely positioned elements (like your .countdown element, you'll need to set left: 50% and margin-left: -XXXpx where XXX represents half of the div's width (including padding and border).
(example: http://jsfiddle.net/7dhwG/)
This will center your page it works great.
#yourdiv {
width: width you want px;
margin: 0 auto;
}
You can also center an absolute position div by setting left to 50% and margin-left to -half of the full width in px.
div {
position: absolute;
width: 500px;
left: 50%;
margin-left: -251px;
}
Stop using margin: 0 auto, Cross browser way of doing this is Here I have tested it and it works perfectly on all browsers
Related
Please see:
https://codepen.io/alanvkarlik/pen/vdWyrd
I'm lost atm. My website has images that show up when you hover over the bold text links.
Right now they are showing up with original size, sometimes stretching beyond the screen.
I'd like them all to have the same width - say 80% of the screen width. Where and how do I edit that?
The main block with those links is centered with following divs:
<div id="wrapper">
<div class="table-container">
<div id="content">
and their css:
#wrapper {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.table-container {
height:100%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 55%;
display:table;
text-align: center;
}
#content {
vertical-align:middle;
height:100%;
display:table-cell;
max-width:100%;
margin: 0 auto;
font-size: 3vw;
line-height: 4vw;
font-family: 'Vesper Libre', serif;
text-align: justify;
color: #fff;
}
Basically I used this set up to make sure the block of links is always in the centre of the screen (both width and height wise).
Any help will be appreciated !
You're already using the vw unit, so just use that for your image:
.hover_link img {
width: 80vw;
height: auto;
}
I also suggest you remove display: none; from .hover_img span as this will nullify your opacity transition (you can add pointer-events: none; to cancel any mouse event on the span and its contents).
I'm struggling to understand divs.
I want to have the 'nav' panel expand vertically as required. The second issue I have is that I can't seem to get padding to work. Any changes I make tend to end up with the 'section' div drop below the 'nav' div.
Please see below jsfiddle and code.
Thanks in advance.
https://jsfiddle.net/s59cwy9s/
<div id="container">
<div id="nav">
test
</div>
<div id="section">
test
<br><br><br><br>
test
<br><br><br><br>
test
</div>
</div>
#container
{
width: 1156px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 10px rgb(0,0,0);
position: relative;
background-color: transparent;
height: auto;
}
#header
{
background-color:black;
color:white;
text-align: center;
padding:5px;
}
#nav
{
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
float:left;
padding: 15px;
display: inline-block;
height: auto;
}
#section
{
/*float: none;*/
padding: 10px;
display: block;
/*position: absolute;*/
/*overflow: auto;*/
background-color: white;
width: auto;
height: auto;
}
This may be due to the fact that your name bar doesn't span the height of the webpage completely. Try something like height :100% for the navbar. It might do the trick.
Here is some help :
https://jsfiddle.net/6ubhyL5k/
Some advices :
Take time to really understand how the page flow works (float : left/right) so you will then understand how padding and margin work when you have floating div
Use what you really know and don't improvise :)
Don't use br to make spaces between blocks (margin and padding are what you should use)
Take a look at how bootstrap works and never forget the responsive design
First I will recommend is using box-sizing attribute
It contains any type of padding or borders within the container's width and height. Find more about it Here. So i suggest:
*
{
box-sizing:border-box;
/* Use browser prefixes if u want support for other browsers */
}
Second is add a class to the container which contains elements wit float css attribute like clearfix and add this code:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
or you can just create a div after the container containing elements with float css attribute and clear it.
<div class='clear'></div>
.class
{
clear:both;
}
Using float as much as it is useful brings about a problem in layout if not properly used. https://css-tricks.com/all-about-floats/
My Solution:
html,body {height:auto; width:100%; background:red; }
* { box-sizing:border-box; margin:0; padding:0; display:block; position:relative; }
#container
{
min-width:800px;
height:auto;
margin:0 auto;
width:100%;
}
#nav
{
float:left;
width:30%;
padding: 15px;
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
background:white;
}
#section
{
float:left;
width:70%;
padding:0 100px;
background:yellow;
}
.clearfix:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Hope It Helps You. Though i recommend researching more on layouts since there's other layout which will give you less problem than floats.
Try
#section{
clear:both;
}
JSfiddle
clear:both allows floated divs to stop continuing on the same line with the other floated ones, and drop below.
Update: https://jsfiddle.net/s59cwy9s/2/
You could fix your issue by giving a margin-right to the #nav
I use bootstrap and joomla.
I have a new design that requires my div and h2, to be 1920 pixels wide and have centered text. What i have done is:
.page-header {
background-color:#3c4547;
width:1920px;
top:0px !important;
position:relative;
margin-top:0px;
display:block;
padding:20px 0px 25px 0px;
z-index:999;
left:-385px;
}
.page-header h2 {
color: #white;
font-size:36px;
font-weight:400;
margin-left: auto;
margin-right: auto;
text-align: center;
}
The wrapper is only 1600 pixels wide or something, thats why i cheat with negative margin.
but it doesnt center the text right on resize - its need to be responsive aswell. Any suggestions?
This is my HTML code and i cannot edit it:
<div class="page-header"><h2 itemprop="name">Header text</h2></div>
It has a as parents.
This is basicly what i want and have, but it doesnt center on responsive:
.
and this is how it looks just with just 100% width:
For Lion and others, to explain the whole code:
<div class="parent">
<div class="page-header>
<h2>testest</h2>
</div>
</div>
.parent {
width:1000px;
}
.page-header {
width:100%;
background:red;
}
.h2 {
color: #ffffff;
text-align:center;
}
** try to use this code, i hope this code will help you :)**
div h2 {
max-width: 1920px;
width: 100%;
height: auto;
display: flex;
justify-content: center;
}
UPDATED
please replace your code to this
.page-header {
background-color:#3c4547;
width:100%;
top:0px !important;
margin-top:0px;
display:block;
padding:20px 0px 25px 0px;
z-index:999;
left:-385px;
}
.page-header h2 {
color: #white;
font-size:36px;
font-weight:400;
margin-left: auto;
margin-right: auto;
text-align: center;
}
no need of position..
Sorry if i did not get your point but if you want to make your h2 center align then why don't you use margin..
see this
.page-header{width:100%;}
h2{margin-left:auto;margin-right:auto;width:auto;text-align:center;}
.section{ margin-left: auto;margin-right: auto;text-align: center; width: 100%;}
i am assuming that you wanted to make your h2 text center align with responsiveness so i typed code like this..correct me if m wrong..
For Testing
<div class="page-header">
<h2 itemprop="name">Header text</h2>
</div>
<div class="section">
<p>lalalala</p>
<p>lalalala</p>
<p>lalalala</p>
<p>lalalala</p>
<p>lalalala</p>
</div>
please check my example and let me know your structure is different.. ty
screenshot
You guys had some good answers, but didnt really solve my problem - i am sure one of yours can be a solution to another with a problem simular to this, but in my case i solved the problem by using javascript to expand the id tag.
if(jQuery('.page-header').length > 0){
pageHeader = jQuery('.page-header');
jQuery('#main').prepend(pageHeader);
}
I'm trying to create a single sentence in some kind of a field I created, and every time I just make the font bigger it pops out of the field, and I gotta lower the font-size to put it inside again.
Can I make the font size bigger and keep it in the field at the same time?
My code:
HTML:
<div id="wrapper">
<h1 style=""> Nothing Created Yet </h1>
</div>
CSS:
#wrapper {
width: 1000px;
height: 120px;
margin-top: 100px;
border: 5px solid gray;
border-radius:500px;
margin-left: auto;
margin-right: auto;
font-family: Arial;
font-size:40px;
background-color: #F0EEF3;
border-color:red;
}
What I get:
You firstly need to remove the browser-default margin styling on your h1 element:
#wrapper h1 {
margin: 0;
}
Then you should ideally give your #wrapper element a line-height equal to its height:
#wrapper {
...
height: 120px;
line-height: 120px;
}
JSFiddle demo.
try this DEMO
#wrapper {
width: 1000px;
height: 120px;
margin-top: 100px;
border: 5px solid gray;
border-radius:500px;
margin-left: auto;
margin-right: auto;
font-family: Arial;
font-size:40px;
line-height:10px;
background-color: #F0EEF3;
border-color:red;
text-align:center;
}
The reason why this happens is you set fixed width and height for the DIV and when you increase the font size, it could no longer fit inside the DIV. So, the answer is it is impossible in fixed size DIV like this.
or do
-added class to the header and put the margin to 0 and center the text
(jsfiddle.net/6GRGH/)
This is my output now
This is the output I want
My coding:
.buttons{
background-image:url("SlicingImage/button_unselect.png");
margin: none;
height: 53px;
width: 180px;
text-transform:uppercase;
text-align:center;
position:relative;
vertical-align:bottom;
}
HTML :
<li class="buttons">home</li>
But nothing changed :(
General tip : if its just a link and not a paragraph, always give line-height equal to div height to align your text vertically in the middlehere add line-height:53px; to your class
Vertical-align: bottom; works only with table-attributes like Table-cell or Table-Row
So:
.buttons{
background-image:url("SlicingImage/button_unselect.png");
margin: 0;
height: 53px;
width: 180px;
text-transform:uppercase;
text-align:center;
position:relative;
vertical-align:bottom;
display: table-cell
}
You need to play with this; here a explanation about it: http://www.onenaught.com/posts/201/
Try this:
.buttons{
background-image:url("SlicingImage/button_unselect.png");
margin: none;
/*height: 53px;
width: 180px;*/
padding: 30px 30px;
text-transform:uppercase;
text-align:center;
position:relative;
vertical-align:bottom;
}
the vertical align does not work like that for what your'e trying to do.
you need to use line-height or padding to resolve this issue.
i would try line-height first
.buttons { line-height: 100px; }
and also remove the height: 53px from your code. But adjust line-height accordingly.
Or you could also try
.buttons { padding-top: 16px; }
and adjust accordingly