How to align body of the webpage to center?
Question
I tried in my CSS such property like text-align: center, but it wasn't working. Then I tried to set left-margin and right-margin to auto but it is not working too. How else can I center all info of my webpage? Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yevhenii Zhdan">
<style type="text/css">
body {
padding: 20px;
}
h1, h2 {
font-weight: normal;
color: #0088dd;
margin: 0px;
text-align: center;
}
h1 {
background-image: url("images/bob.gif");
background-repeat: no-repeat;
text-indent: -9999px;
padding-bottom: 3%;
}
h2 {
padding: 10px;
width: 12em;
font-family: "Gill Sans", Arial, sans-serif;
font-size: 90%;
text-transform: uppercase;
letter-spacing: 0.2em;
border: 2px solid #0088dd;
border-right: none;
border-bottom: none;
}
</style>
</head>
<body>
<h1>YZhdan</h1>
<h2><b>How to find me:</b></h2>
<br />
<iframe
width="450"
height="350"
src="https://www.google.com.ua/maps?q=...&output=embed">
</iframe>
<p><b>© Yevhenii Zhdan</b></p>
</body>
</html>
body { padding: 20px; } h1, h2 { font-weight: normal; color: #0088dd; margin: 0px; text-align: center; } h1 { background-image: url("images/bob.gif"); background-repeat: no-repeat; text-indent: -9999px; padding-bottom: 3%; } h2 { padding: 10px; width: 12em; font-family: "Gill Sans", Arial, sans-serif; font-size: 90%; text-transform: uppercase; letter-spacing: 0.2em; border: 2px solid #0088dd; border-right: none; border-bottom: none; }
<h1>YZhdan</h1> <h2><b>How to find me:</b></h2> <br /> <iframe width="450" height="350" src="https://www.google.com.ua/maps?q=...&output=embed"> </iframe> <p><b>© Yevhenii Zhdan</b> </p>
8 answers
solution1
3 ACCPTED 2015-08-08 15:51:45
You can wrap all content in a div, then you would set a width on that div and set the left and right margin to auto.
<head>
<style>
.container {
width: 75%;
margin-left: auto;
margin-right: auto;
</style>
</head>
<body>
<div class="container">
<!-- other content -->
</div>
</body>
solution2
1 2015-08-08 15:57:03
You can start with setting body 's text-align:center , along with some modifications
body { padding: 20px; text-align:center; } h1, h2 { font-weight: normal; color: #0088dd; text-align: center; } h1 { background-image: url("images/bob.gif"); background-repeat: no-repeat; text-indent: -9999px; padding-bottom: 3%; } h2 { display:inline; padding: 10px; width: 12em; font-family: "Gill Sans", Arial, sans-serif; font-size: 90%; text-transform: uppercase; letter-spacing: 0.2em; border: 2px solid #0088dd; border-right: none; border-bottom: none; }
<h1>YZhdan</h1> <h2><b>How to find me:</b></h2> <br /> <iframe width="450" height="350" src="https://www.google.com.ua/maps?q=...&output=embed" style="margin-top: 30px;"> </iframe> <p><b>© Yevhenii Zhdan</b> </p>
solution3
1 2015-08-08 16:51:29
body { padding: 20px; text-align:center; } .container { text-align: center; } h1, h2 { font-weight: normal; color: #0088dd; text-align: center; } h1 { background-image: url("images/bob.gif"); background-repeat: no-repeat; text-indent: -9999px; padding-bottom: 3%; } h2 { display:inline; padding: 10px; width: 12em; font-family: "Gill Sans", Arial, sans-serif; font-size: 90%; text-transform: uppercase; letter-spacing: 0.2em; border: 2px solid #0088dd; border-right: none; border-bottom: none; margin: 0 auto; }
<div class="container"> <h1>YZhdan</h1> <h2><b>How to find me:</b></h2> <br /> <iframe width="450" height="350" src="https://www.google.com.ua/maps?q=...&output=embed" style="margin-top: 30px;"> </iframe> <p><b>© Yevhenii Zhdan</b> </p> </div>
solution4
0 2015-08-08 15:53:54
You just wrap all the content in a div and set margin: 0 auto
<div class="content" style="
width: 500px;
margin: 0 auto;
">
<h1>YZhdan</h1>
<h2>
<b>How to find me:</b>
</h2>
<br>
<iframe width="450" height="350" src="https://www.google.com.ua/maps?q=...&output=embed"></iframe>
<p><b>© Yevhenii Zhdan</b></p>
</div>
solution5
0 2015-08-08 15:54:13
Give it a width and then the margin. the margin must be the next element. such as content, or page.
width: 90%;
margin: 0 auto;
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yevhenii Zhdan">
<style type="text/css">
body {
padding: 20px;
}
content{
width: 90%;
margin: 0 auto;
}
h1, h2 {
font-weight: normal;
color: #0088dd;
margin: 0px;
text-align: center;
}
h1 {
background-image: url("images/bob.gif");
background-repeat: no-repeat;
text-indent: -9999px;
padding-bottom: 3%;
}
h2 {
padding: 10px;
width: 12em;
font-family: "Gill Sans", Arial, sans-serif;
font-size: 90%;
text-transform: uppercase;
letter-spacing: 0.2em;
border: 2px solid #0088dd;
border-right: none;
border-bottom: none;
}
</style>
</head>
<body>
<content>
<h1>YZhdan</h1>
<h2><b>How to find me:</b></h2>
<br />
<iframe
width="450"
height="350"
src="https://www.google.com.ua/maps?q=...&output=embed">
</iframe>
</content>
</body>
solution6
0 2015-08-08 15:55:32
Wrap the content of body inside a div with class container , then try this:
.container{
display: table;
max-width:1200px; /*whatever you want*/
width:auto;
margin:0 auto
}
solution7
0 2015-08-08 15:58:02
You need to start working with <div> . After that when you've put your elements within a <div> assign a width to it:
#container {
width: 100px;
margin: 0 auto;
}
for the following HTML:
<div id="container">
<h1>Hallo World!</h1>
<p>Bla bla.</p>
</div>
If you for some reason you don't want to use <div> then assign a fix width to your elements ( h1 and h2 ) and set margin: 0 auto; for those elements. This should have the same effect.
solution8
0 2015-08-08 16:47:11
body { padding: 20px; } .container { text-align: center; } h1, h2 { font-weight: normal; color: #0088dd; margin: 0px; text-align: center; } h1 { background-image: url("images/bob.gif"); background-repeat: no-repeat; text-indent: -9999px; padding-bottom: 3%; } h2 { padding: 10px; width: 12em; font-family: "Gill Sans", Arial, sans-serif; font-size: 90%; text-transform: uppercase; letter-spacing: 0.2em; border: 2px solid #0088dd; border-right: none; border-bottom: none; margin: 0 auto; }
<div class="container"> <h1>YZhdan</h1> <h2><b>How to find me:</b></h2> <br /> <iframe width="450" height="350" src="https://www.google.com.ua/maps?q=...&output=embed"> </iframe> <p><b>© Yevhenii Zhdan</b> </p> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to align entire html body to the center?
how to horizontally center align body wrapper?
HTML Body align as center
Vertical align center of body
align body to center - centering body
Align a horizontal form at the center of the webpage
HTML / CSS: How to align link to another website to Center of Webpage --> Tried Align Link to Center in CSS … did not work
How to horizontal align a section that is out of body's margin to center?
HTML align center with respect to the element, not the webpage layout
<td> center body of text but text left align
Related Tags