1 Attachment(s)
[RESOLVED] CSS - Centering a div? (Resolved)
Hi,
How would I center the links and pictures on the left hand-side of the page (see attachment)?
I have tried using:
Code:
<div style = "text-align:center;">
</div>
But that does not work!
The code I have for the nav bar:
Code:
<div class="navigation">
<br /><center><img src="../images/berry01_red.gif" width="22" height="20" align="middle" alt="A Red Berry" /></center>
<br /><center>Home</center>
<br /><center><img src="../images/berry01_red.gif" width="22" height="20" alt="A Red Berry" /></center>
<br /><center><a href="../html/produce.html" title = "Joe's Produce">Produce</a></center>
<br /><center><img src="../images/berry01_red.gif" width="22" height="20" alt="A Red Berry" /></center>
<br /><center><a href="../html/history.html" title = "Joe's History">History</a></center>
<br /><center><img src="../images/berry01_red.gif" width="22" height="20" alt="A Red Berry" /></center>
<br /><center><a href="../html/contact_us.html" target="_blank" title = "Contact Joe's">Contact Us</a></center>
<br />
<br />
<br />
<center><img src="../images/valid_xhtml10.gif" width="90" height="40" alt="Xhtml 1.0 Logo" /></center>
</div>
The code in the css file:
Code:
body {
background-color: #66FFCC;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt;
}
p {
color: #006400;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt;
}
ul {
color: #006400;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt;
}
table {
color: #006400;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12pt;
}
p.first:first-letter {font-size: 14pt; font-style: italic;}
p.second:first-letter {font-size: 14pt; font-style: italic;}
p.third:first-letter {font-size: 14pt; font-style: italic;}
p.fourth:first-letter {font-size: 14pt; font-style: italic;}
p.fifth:first-letter {font-size: 14pt; font-style: italic;}
p.sixth:first-letter {font-size: 14pt; font-style: italic;}
a:link {color: #006400;}
a:visited {color: #32CD32;}
a:hover {color: #FFFFFF; background: #006400; text-decoration: none;}
a:active {color: #FF0066; background: #006400; text-decoration: none;}
h2 {text-align: center; color:#006400; font-size: 12pt}
.container
{
width: 1024px;
}
.banner
{
height:42px;
}
.navigation
{
float: left;
width: 5px;
}
.main
{
Margin-left: 90px;
}
float: left; is the only way I know of to place the nav bar to the side like that. However, I can not center the text nor images.
Thank you,
Aaron
Edit: I am only trying to center the contents of the div not the whole div.
Re: CSS - Centering a div?
It doesn't matter I solved the problem.
I solved it by:
replacing all the class divs with id divs:
Code:
<div id="navigation">
instead of
<div class="navigation">
In the "css" I put:
Code:
#navigation
{
float: left;
text-align: center;
width: auto;
}
#main
{
margin-left: 130px;
}
I found the solution of this site.
