CODEWITHSUNDEEP
htmlcss
user1925442
user1925442

Reputation: 45

How to align body of the webpage to center?

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=...&amp;output=embed">
        </iframe>
        <p><b>&#169; 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=...&amp;output=embed">
</iframe>
<p><b>&#169; Yevhenii Zhdan</b>
</p>

Upvotes: 2

Views: 14301

Answers (8)

Jonas Furlan
Jonas Furlan

Reputation: 54

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=...&amp;output=embed" style="margin-top: 30px;">
</iframe>
<p><b>&#169; Yevhenii Zhdan</b>
</p>  
</div>

Upvotes: 1

Jonas Furlan
Jonas Furlan

Reputation: 54

    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=...&amp;output=embed">
    </iframe>
    <p><b>&#169; Yevhenii Zhdan</b>
    </p>
</div>

Upvotes: 0

pool pro
pool pro

Reputation: 2114

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=...&amp;output=embed">
        </iframe>
      </content>
    </body>

Upvotes: 0

Kevin Goedecke
Kevin Goedecke

Reputation: 2003

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.

Upvotes: 0

Tushar Gupta
Tushar Gupta

Reputation: 15923

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=...&amp;output=embed" style="margin-top: 30px;">
</iframe>
<p><b>&#169; Yevhenii Zhdan</b>
</p>

Upvotes: 1

optimus
optimus

Reputation: 856

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
}

Upvotes: 0

hansottowirtz
hansottowirtz

Reputation: 702

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=...&amp;output=embed"></iframe>
  <p><b>© Yevhenii Zhdan</b></p>
</div>

Upvotes: 0

ryano.mcc13
ryano.mcc13

Reputation: 474

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>

Upvotes: 4

Related Questions