Centering in DIV

Question

Bensirpent07 0 Junior Poster

10 Years Ago

This is code that I currently have right now so that I could have text centered in a div box. But there has to be an easier way, can someone show me how?

Code I am using now:

<div id="teampiccontainer" style="width:1000px; height:100px; background-color:#EB6262; margin: 0 auto;">
        <div id="text1" style="display:table-cell; vertical-align: middle; width:1000px; height:100px; margin: 0 auto;">
            <center>This area will contain the team picture, for now just ignore this text.  It will be replaced by a picture once a picture is acquired.</center>
        </div>
</div>

Here is the complete code for my website, since I don't have the CSS code here too, of course the nav bar is gonna look weird:

<html>

<head>
    <title>Ceracy Games | About Us</title>
    <link rel="stylesheet" type="text/css" href="aboutstyle.css"/>
    <link rel="stylesheet" type="text/css" href="navigationbar.css" />
</head>

<body>
    <div id="navcontainer">
        <center><div id="navigationbar" style="width:1000px; margin: 0px 0px" align="left">
            <img src="http://i.imgur.com/5NtjVFc.png" style="margin:0px -0px; position:absolute;"/>
            <ul style="margin:-8px 0px 0px 0px; height:50px; padding:0; width:1000px; background:linear-gradient(#e41010, #ea7575); padding-top:16px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;">
                <a href="www.ceracygames.com" style="text-decoration:none; color: white"><li class="navbar">Home</li></a>
                <a href="" style="text-decoration:none; color: white"><li class="navbar">News</li></a>
                <a href="" style="text-decoration:none; color: white"><li class="navbar">About Us</li></a>
                <a href="" style="text-decoration:none; color: white"><li class="navbar">Forums</li></a>
                <a href="" style="text-decoration:none; color: white"><li class="navbar">Contact Us</li></a>
            </ul>
        </div></center>
    </div>
    <div id="seperate1" style="height:20px; width: 100%;">
    </div>
    <div id="teampiccontainer" style="width:1000px; height:100px; background-color:#EB6262; margin: 0 auto;">
        <div id="text1" style="display:table-cell; vertical-align: middle; width:1000px; height:100px; margin: 0 auto;">
            <center>This area will contain the team picture, for now just ignore this text.  It will be replaced by a picture once a picture is acquired.</center>
        </div>
    </div>
</body>

</html>

html-css web-design

5 Contributors
20 Replies
416 Views
4 Days Discussion Span
Latest Post 10 Years Ago Latest Post by ComNaD

Alberto Bucur 0 Junior Poster

10 Years Ago

Put text-align: center in the style attribute of the div which containing the text.
You can use text-align in css file too.

diafol

10 Years Ago

FYI <center> does not exist in HTML5. Probably best not to use it.

ComNaD 0 Newbie Poster

10 Years Ago

Tagging onto what alb and dia pointed out, <center> is obsolete in HTML5, and putting style elements in the HTML code is discouraged. Better to use CSS. Use margin:auto; and text-align:center; (even for images). Sometimes when you don't have much in a div, using min-width and max-width to define the div size (thus the 'center' point) will save headaches.

ComNaD 0 Newbie Poster

10 Years Ago

A couple of HTML5 tips: use <nav> instead of <div> for your navigation, and the <figure> tag for your image.

pritaeas 2,194 ¯\_(ツ)_/¯

10 Years Ago

use <nav> instead of <div> for your navigation

<nav> is NOT a replacement for <div>. It's a semantic element, like <section>. It shouldn't be used for layout.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ComNaD 0 Newbie Poster · Answer 1 · 2014-03-19T15:43:19+00:00

<nav> should be used instead of <div> when creating navigation

Bensirpent07 0 Junior Poster · Answer 2 · 2014-03-19T16:23:32+00:00

Bensirpent07 0 Junior Poster

10 Years Ago

Oh, I'm not familiar with <nav>

ComNaD 0 Newbie Poster · Answer 3 · 2014-03-19T16:26:08+00:00

It's new to HTML5. Helps with eReaders, as well as makes the code eaiser to read, like <article> and <aside>. Many new tags: http://www.w3schools.com/html/html5_new_elements.asp

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 4 · 2014-03-19T16:52:27+00:00

<nav> should be used instead of <div> when creating navigation

http://www.w3.org/TR/2011/WD-html5-author-20110705/Overview.html

nav is for document metadata, whereas div is for grouping content.

ComNaD 0 Newbie Poster · Answer 5 · 2014-03-19T18:21:54+00:00

Please explain your thoughts on the place of it in the coding. The example listed at the w3.org link is the same as I use, and was trying to state above (apoligies if I wasn't stating it as I meant. Their example is:

<body>
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <time>2009-04-01</time></p>
  <nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 <div>
  <article>
   <header>
    <h1>My Day at the Beach</h1>
   </header>
   <div>
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time pubdate="" datetime="2009-10-10T14:36-08:00">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </div>
 <footer>
  <p>Copyright © 2006 The Example Company</p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

ComNaD 0 Newbie Poster · Answer 6 · 2014-03-19T18:31:33+00:00

I tend to use something like this:

<body>
<div id="wrapper">
    <header>
    </header>
    <nav>
        <ul>
            <li></li>
        </ul>
    </nav>
    <section>
        <figure>
        </figure>
        <article>
            <p></p>
        </article>
        <aside>
        </aside>
    </section>
    <footer>
    </footer>
</div>
</body>

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 7 · 2014-03-19T19:20:11+00:00

Your example is fine, it just doesn't line up with "nav being a replacement for div". A div can be used in conjunction with nav just fine, as it's just an indication that navigation is inside. A div can still be used to define a certain layout, just like the ul in the example above. The ul (or div) has the layout (CSS), whereas nav shouldn't.

ComNaD 0 Newbie Poster · Answer 8 · 2014-03-19T19:55:11+00:00

I believe I see what you are sayng now. Are you saying that this is correct:

   <body>
    <div id="menu">
        <nav>
            <ul>
                <li></li>
                <li></li>
            </ul>
         </nav>
    </div>
  </body>

And this is not:

    <body>
        <nav id="menu">
            <ul>
                <li></li>
                <li></li>
            </ul>
         </nav>
    </body>

?

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 9 · 2014-03-19T20:18:00+00:00

pritaeas 2,194 ¯\_(ツ)_/¯

10 Years Ago

Yes. That kinda covers it ;)

ComNaD 0 Newbie Poster · Answer 10 · 2014-03-19T21:54:27+00:00

Thank you, that's interesting. I've never read anything about not putting id or class in the new tags. I have seen section and article tags with class in them. I'll have to read up more on w3.org. I didn't find anything about that yet.

diafol · Answer 11 · 2014-03-19T23:41:37+00:00

Nice discussion guys - I'm sure that's going to help a lot of people with regard to the <nav> tag. I think I need to brush up on my w3.org revision too.

Bensirpent07 0 Junior Poster · Answer 12 · 2014-03-20T03:45:46+00:00

I figured out A WAY to center it, I'm not sure if it is completely 100% in the middle, but it looks pretty dang close. Here is all the HTML and CSS. Thanks everyone for all the help, this question has been solved :)

HTML:

<!DOCTYPE html>
<head>
    <style>font.tahoma{font-family:Tahoma, Geneva, sans-serif;}</style>
    <style>font.trebuchet{font-family:"Trebuchet MS", Helvetica, sans-serif;}</style>
    <title>Ceracy Games | About Us</title>
    <link rel="stylesheet" type="text/css" href="aboutstyle.css"/>
    <link rel="stylesheet" type="text/css" href="navigationbar.css" />
</head>
<body>
    <div id="navcontainer" align="center">
        <div id="navigationbar" style="width:1000px; margin: 0px 0px;">
            <img src="http://i.imgur.com/5NtjVFc.png" style="display: block; margin-left:auto; margin-right:auto; width:996px; border-left: solid black 2pt; border-right: solid black 2pt; position: absolute;"/>
            <ul align="left" style="margin:-8px 0px 0px 0px; height:50px; padding:0; width:996px; background:linear-gradient(#e41010, #ea7575); padding-top:12px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border: solid black 2pt;">
                <a href="www.ceracygames.com" style="text-decoration:none; color: white"><li class="navbar">Home</li></a>
                <a href="" style="text-decoration:none; color: white"><li class="navbar">News</li></a>
                <a href="" style="text-decoration:none; color: white"><li class="navbar">About Us</li></a>
                <a href="" style="text-decoration:none; color: white"><li class="navbar">Forums</li></a>
                <a href="" style="text-decoration:none; color: white"><li class="navbar">Contact Us</li></a>
            </ul>
        </div>
    </div>
    <div id="seperate1" style="height:20px; width: 100%;"></div>
    <div id="teampiccontainer" style="width:1000px; height:100px; background-color:#EB6262; margin: 0 auto; border-radius: 10px; border: solid black 2pt;">
        <div id="text1" style="display:table-cell; vertical-align: middle; width:1000px; height:100px; margin: 0 auto;">
            <center><font class="trebuchet">This area will contain the team picture, for now just ignore this text.  It will be replaced by a picture once a picture is acquired.<br>The image size will be width:1000px height:unknown.  So if you want to add a picture just E-Mail it to me.<br>E-Mail is benkuhman@gmail.com</font></center>
        </div>
    </div>
    <div id="seperate2" style="height:10px; width: 100%;"></div>
    <div id="aboutceracy" style="width:750px; height:200px; background-color:#646464; margin: 0 auto; border-radius: 10px; padding: 0 10px 0 10px; border: solid black 2pt;">
        <center><h1 style="padding-top:5px;"><font class="tahoma">About Ceracy Games</font></h1></center>
        <font class="trebuchet">We are a game creating team that tries to make the best games possible.  We hope that you enjoy the games that we make!  If you have any questions please use the "Contact Us" page!<br>
        <br>
        Thanks,<br>
        Ceracy Games</font>
    </div>
    <div id="seperate3" style="height:48px; width: 100%;"></div>
    <div id="row1aboutcontainer">
        <div align="center" id="row1person1">
            <div id="aboutlist">
                <img src="http://i.imgur.com/KpZdyRW.jpg" style="width:170px; height:170px; border: solid black 2pt; float:left; position:absolute; right:1222px; border-top-left-radius:10px; border-bottom-left-radius:10px;"/>
                <ul class="abouttext">
                    <li><b>Name:</b> Ben "Bensirpent07" Kuhman</li>
                    <li><b>Job:</b> Web Designer/3D Modeller</li>
                    <li><b>About:</b> Ben is 14 years old, living in a town called Chiefland. Ben enjoys playing and creating many different types of video games. He has worked on websites since he was 12 and hopes to expand his knowledge into things like JavaScript, or C#. To contact Ben, you can e-mail him at benkuhman@gmail.com </li>
                </ul>
                <img src="http://i.imgur.com/PrEf2cH.jpg" style="width:170x; height:170px; border: solid black 2pt; float:left; position:absolute; right:576px; border-top-left-radius:10px; border-bottom-left-radius:10px;"/>
                <ul class="abouttext2">
                    <li><b>Name:</b> Kyle "englishbacon" Griffin</li>
                    <li><b>Job:</b> Team Leader/3D Modeller</li>
                    <li><b>About:</b> Kyle is a 17 year old guy living in Australia.  He is a 3D modeller, and is currently using Maya.  He had been using Google Sketch Up since he was 11, so he is quite skilled at 3D modelling. To contact him e-mail him at englishbacon96@gmail.com
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

CSS(1):

html{

    background-image:url('http://i.imgur.com/GRqXyR1.png');
    background-repeat:no-repeat;
    background-size:100% 100%;
    width:100%;
    height:100%;
}
ul.abouttext{
    display:inline;
    margin: 0px 0px;
    text-align:left;
    padding: 5px 5px 5px 5px;
    background-color:#646464;
    border: solid black 2pt;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    position:relative;
    right:-368px;
    width: 350px;
    height: 160px;
    list-style-type: none;
    float:left;
    font-family: verdana;
    font-size: 11pt;
}
ul.aboutpic{

}
ul.abouttext2{
    display:inline;
    margin: 0px 0px;
    text-align:left;
    padding: 5px 5px 5px 5px;
    background-color:#646464;
    border: solid black 2pt;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    position:relative;
    right:-650px;
    list-style-type: none;
    float:left;
    width: 350px;
    height: 160px;
    font-family: verdana;
    font-size: 11pt;
}

CSS(2):

li.navbar{
    display:inline-block;
    margin: 0px 25px;
    border-width: 0px 2px 2px 2px;
    border-color: black;
    border-style: solid;
    padding: 11px 27px 11px 27px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    background:linear-gradient(#de4d4d, #de1818, #e91010);
    font-family:Arial, Helvetica, sans-serif;
}
li.navbar:hover{
    display:inline-block;
    margin: 0px 25px;
    border-width: 0px 2px 2px 2px;
    border-color: black;
    border-style: solid;
    padding: 11px 27px 11px 27px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    background:linear-gradient(#ff3333, #ff6666, #ff9999);
    color: white;
    font-family:Arial, Helvetica, sans-serif;
}

Again, thanks for all the help :D

diafol · Answer 13 · 2014-03-20T07:40:07+00:00

I know it's solved, but please take out the presentation and layout from your html markup. You have inline styling and html props like 'align'. Make your html as lean and reusable as possible - you can then 'skin' to your heart's content without making any changes to the underlying markup.

ComNaD 0 Newbie Poster · Answer 14 · 2014-03-20T16:23:53+00:00

Thanks, diafol. Part of the elegance of HTML5 is then clean tags instead of a bunch of div tags that don't indicate the purpose of the container. I checked through my HTML5 resource books and they all agree with the classes I took a few years back. They all teach that the new tags are intended to be replacements for div. It's not mandatory, but <nav> is prefered to <div id="navigation">. And if a CSS selector is needed, it is added to the new tag like <nav id="menu">.
I am interested in learning and growing, which is one reason I love the idea of daniweb and am excited to be a new member. So if there is information out there that contradicts these sources I would be very eager to read up on it.

ComNaD 0 Newbie Poster · Answer 15 · 2014-03-20T18:01:28+00:00

HTML for Masterminds by JD Gauchat is a good resource for this: http://www.amazon.com/HTML5-Masterminds-2nd-J-D-Gauchat-ebook/dp/B00570RJQ6/ref=sr_1_1_bnp_1_kin?ie=UTF8&qid=1395338435&sr=8-1&keywords=html+for+masterminds