This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Center contents of webpage
I have followed the way to make webpage center aligned but the site still is left aligned. Please help out. Thanks
#parent{
margin:0 auto;
width: 960px;
}
<div id="parent">
<!--more code goes here-->
</div>
In some browsers you still have to put a text-align on the body to make it work:
body {
text-align: center; /* this helps some browsers align the #parent element */
}
#parent{
margin:0 auto;
width: 960px; /* a fixed width is mandatory for margin auto to work */
text-align: left; /* this resets the contents alignment */
}
Related
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Closed 4 years ago.
I've got several divs on my webpage with background images. Currently it's what I want, but with white borders on the side and top/bottom (for those divs at the top/bottom of page).
This is the current situation:
My webpage - notice slight white border around photo
I'm trying to get it to fill the browser (instead of having borders), but none of the other suggestions are working for me. Below is my code for one div:
<div class="header-image">
<img src="smesh-colour-hires.png">
</div>
And CSS:
.header-image {
background-image: url("animals-deep-ocean-deep-sea-130621.jpg");
background-size: cover;
background-position: center;
height: 500px;
margin: auto;
display:flex;
align-items:center;
justify-content:center;
}
.header-image img{
max-width: 800px;
}
Let me know if anything doesn't make sense and I'll try my best to explain.
Any help would be much appreciated, this is really blocking me!
The white border is probably due to the default margin on the body.
Try adding this in your CSS.
body {
margin: 0;
}
Add this to the top of your CSS
body, html {
margin: 0;
padding: 0;
}
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 6 years ago.
I am facing a problem, how to center text (h1) inside div. I want the web page to be full screen and i achieved that with vh units.
.page { height: 100vh;
width: 100%;}
On that page i want div to be centered horizontally and vertically. I tried with
.div { top: 50%;
left: 50%;}
but that just didnt do the trick. I also want this to be "resposive" si that it is centered on any screen.
I am looking to build something like this: http://www.anthonygoodisondesign.com/
use css code as below;
div{height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
<div> <h1>center me</h1></div>
Use this:
text-align: center;
position: relative;
top: 40vh;
transform: translateY(-50%);
https://jsfiddle.net/yak613/pLb8aysd/
This question already has answers here:
Centering images in a div vertically
(3 answers)
Closed 9 years ago.
I have two columns in my HTML page.
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
Each of them occupies half of the page
#left {
float: left;
width: 50%;
}
#right {
float: left;
width: 50%;
}
I want to center a picture in the right column. I know that I can make it horizontally centered by doing margin-left: auto; margin-right: auto;. How can I make it vertically centered?
The first issue I see is that there is no height specified for the height of the left and right divs; height should be set to 100% or any value to your liking. To vertically center the image, we can use absolute-positioning. We would set the dimensions for the image (which is good practice in any case) and then set the top:50% and left:50% attributes. This would push the image outside the box though, so we add negative margins that are half the width and height of the image. This will vertically and horizontally align the image in a div every time!
Here's the updated CSS:
#left, #right {
width: 50%;
height:100%;
float:left;
position:relative;
}
#right img {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 80%;
margin-top: -40%; /* Half the height */
margin-left: -40%; /* Half the width */
}
Take a look at this JSFiddle: http://jsfiddle.net/bYF7F/2/.
I know this question has been marked as answered, but you did mention that the height and width on the image was not ideal. So i would like to suggest another solution.
Add:
display: -webkit-flex;
display: flex;
to the right div, and:
margin: auto;
to the image. I think this is what you were after. See fiddle http://jsfiddle.net/Fqa7b/
If you use a TABLE instead of a DIV it will center automatically.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to style in HR on left and right hand side of div?
How to make a line before and after my h1 tag?
I need to do something like that in HTML and CSS.
The Format
"-------------------- MY Footer ------------------------------"
I need to make it at the center of my screen using HTML and CSS.
Exampe: (CSS for 'footer')
margin: 0 auto;
width: 600px;
a div with .centered {width: 100% , text-align:center } as the css class
And if the css property text-align: center doesn't work you can use the one from below
You can use a div, with a class like the one from below
.center{
Left: 50%
}
that way you can have aligned in the center of the screen
If you want to center the text then use text-align: center; if you want to center the div where the text is than first give the div - container a width e.g: width: 200px; than set margin: 0 auto;
I would like to align my container div to center vertically just like it is aligning himself horizontally because of margin: auto;. I've searched some time on google on how to do that but it does not seem to be working for me. Maybe there is some kind of universal way to do that, as easy as margin: auto; method for horizontal centering? Because it seems for me very strange that we live in 2011 year and there is still no simple css command for doing this task...
#container
{
margin: auto;
width: 960px;
height: 640px;
background-color: brown;
}
There are tons of tutorials for vertical alignment, especially for IE, which needs special care. One of them: Vertically center content with CSS. Also another answer here.
Can it be even simpler...
html, body {
overflow:hidden
}
#container {
width:960px;
height:640px;
position:absolute;
top:50%;
left:50%;
margin-top:-320px;
margin-left:-480px;
background:brown
}
The overflow:hidden is to hide the scrollbar that appears (html for IE6 and body for IE5). I don't know why this happens.
But if you want to keep it scrollable if the browser window is smaller, just make the height 639px and remove the overflow:hidden.
If your div has a fixed height, you can align it vertically by adding another div (with a float) with a negative margin (half the height of the main div) and then alter your div's CSS (adding the clear).
Also don't forget to specify the 100% height of the html and body, without that it doesn't work.
Like this:
CSS:
html {
overflow: auto;
}
html, body {
margin:0;
padding:0;
height:100%;
}
#alignDiv {
float:left;
height:50%;
margin-bottom:-320px; /* half the centered div */
width:1px;
}
#container
{
margin: 0 auto;
width: 960px;
height: 640px;
background-color: brown;
clear:left; /* without the clear it won't center */
}
html:
<div id="alignDiv"></div>
<div id="container"></div>