www.webdeveloper.com
Results 1 to 8 of 8

Thread: How do you center a text book purely in the center of a web page

  1. #1
    Join Date
    Aug 2013
    Location
    Washington
    Posts
    5

    Angry How do you center a text book purely in the center of a web page

    Alright, I'm new at this and I'm having trouble, that's why I came to where I can get my answers. I have two texts, <p>, that I want to align in the middle, smack dab, of the web page in HTML. I've tried many variations on CSS to align the text. Here's the first attempt:

    br:first-child {
    text-align: center;
    vertical-align: middle;
    }

    br:nth-child(2) {
    text-align: center;
    vertical-align: middle;;
    }

    .centered {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50%;
    margin-left: -100%;
    }

    I've done a lot more I don't even remember, searching online over and over again and NONE of it work at all. NONE of it was centered.

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there mrsmithysmith,

    and a warm welcome to these forums.

    Here is an example for you to try...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    
    <title>centered horizontally and vertically</title>
    
    <style>
    html,body {
        display:table;
        width:100%;
        height:100%;
        margin:0;
        background-color:rgb(242,241,241);
     }
    body {
        display:table-cell;
        vertical-align:middle;
     }
    #box {
        width:50%;
        padding:1em 0;
        margin:auto;
        border-radius:0.8em;
        background-color:rgb(255,255,255);
        box-shadow:inset 0 0 1.4em rgba(0,0,0,0.6);
     }
    #box p {
        margin:1em 2em;
     }
    </style>
    
    </head>
    <body>
    
    <div id="box">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p><p>
    Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
    lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
    ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
    euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu 
    et mauris scelerisque tristique. Donec fringilla mauris dolor, 
    sit amet vulputate lacus. Nulla feugiat mattis nulla non 
    tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis 
    nisi eget neque tempus facilisis eu quis sapien.
    </p>
    </div>
    
    </body>
    </html>
    cootheahead

  3. #3
    Join Date
    Aug 2013
    Location
    Washington
    Posts
    5
    Quote Originally Posted by coothead View Post
    Hi there mrsmithysmith,

    and a warm welcome to these forums.

    Here is an example for you to try...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    
    <title>centered horizontally and vertically</title>
    
    <style>
    html,body {
        display:table;
        width:100%;
        height:100%;
        margin:0;
        background-color:rgb(242,241,241);
     }
    body {
        display:table-cell;
        vertical-align:middle;
     }
    #box {
        width:50%;
        padding:1em 0;
        margin:auto;
        border-radius:0.8em;
        background-color:rgb(255,255,255);
        box-shadow:inset 0 0 1.4em rgba(0,0,0,0.6);
     }
    #box p {
        margin:1em 2em;
     }
    </style>
    
    </head>
    <body>
    
    <div id="box">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p><p>
    Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
    lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
    ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
    euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu 
    et mauris scelerisque tristique. Donec fringilla mauris dolor, 
    sit amet vulputate lacus. Nulla feugiat mattis nulla non 
    tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis 
    nisi eget neque tempus facilisis eu quis sapien.
    </p>
    </div>
    
    </body>
    </html>
    cootheahead
    Thank you very much! Feeling welcomed already with my first reply here. So what exactly is the #box there? is the name you gave for <div>?

  4. #4
    Join Date
    Aug 2013
    Location
    Washington
    Posts
    5
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <title>Welcome</title>
    </head>
    <body>
    <br>text</br>
    <br>text #2</br>
    </body>

    Here's my HTML and below is my CSS

    br:first-child {
    text-align: center;
    vertical-align: middle;
    }

    br:nth-child(2) {
    text-align: center;
    vertical-align: middle;;
    }

    .centered {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50%;
    margin-left: -100%;
    }

  5. #5
    Join Date
    Mar 2011
    Posts
    1,142
    Your stylesheet doesn't work because <br> elements aren't containing elements, so they don't have any children and can't use any CSS alignment settings. Use a containing element like <div> or <p> to hold your text and you'll make some progress.
    Rick Trethewey
    Rainbo Design

  6. #6
    Join Date
    Aug 2013
    Location
    Washington
    Posts
    5
    It didn't work at all as well. I'm using JEdit as an application if that's the error and using Safari. Here's a link to the screenshot I took. On the background (text 1 and text 2) is the result on Safari. You can see the code program i use JEdit, left is HTML and right is CSS.

  7. #7
    Join Date
    Mar 2011
    Posts
    1,142
    Sorry. I didn't really think through my reply. I didn't mean to overwhelm you with technical stuff.

    If you just need a place to start, I have some code that should help. I discovered this simple method of centering a single block element on Smashing Magazine's site and it works very well within some limits. The key is to set a specific height for the containing element you want to center.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Welcome</title>
    <style type="text/css">
    
    * { margin:0; padding:0; }
    
    #container {
    width:50%;
    height:250px;
    margin:auto;
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    background-color:lightblue;
    }
    
    #container p { text-align:center; }
    
    </style>
    </head>
    <body>
    <div id="container">
    <p>text #1</p>
    <p>text #2</p>
    </div><!-- end #container -->
    </body>
    </html>
    It should get you started. Just don't be surprised if its difficult to add elements outside of the #container. Good luck!
    Rick Trethewey
    Rainbo Design

  8. #8
    Join Date
    Aug 2013
    Posts
    57
    You can also do things like:

    div {
    position:absolute; top:500px; left: 500px;
    }

    If you got more div's on one page you could use classes.

    for example: <div class="c1"></div>

    CSS:

    .c1 {
    position:absolute; top:500px; left:500px;
    }

    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles