how do I center links within a <div> element?
Here is my css:
body {
}
#sidebar {
background-color:lightgray;
width:200px;
position:fixed;
height:1000px;
float:left;
}
li {
list-style-type:none;
}
a {
display:block;
background-color:white;
width:150px;
text-align:center;
}
And here is my markup:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<header>Header</header>
<div id="sidebar">
<ul>
<li>
<a href="WebForm1.aspx" class="btn">Link1</a>
</li>
<li>
<a href="WebForm1.aspx" class="btn">Link2</a>
</li>
</ul>
</div>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolderMain" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Currently, it's not centered. It's currently to the right.
Re: how do I center links within a <div> element?
To Center your links inside your Div first you need to wrap them in a Paragraph, then set the paragraph test align style to center!!
So change your Div markup to this -
Code:
<div id="sidebar">
<ul>
<li>
<p class="Links"><a href="WebForm1.aspx" class="btn">Link1</a></p>
</li>
<li>
<p class="Links"><a href="WebForm1.aspx" class="btn">Link2</a></p>
</li>
</ul>
</div>
<div>
And add a new item to your styles like this -
Code:
.Links{
text-align:center;
}
Re: how do I center links within a <div> element?
Re: how do I center links within a <div> element?
no problem, mark your thread as resolved using the Thread tools if that has fixed your problem :wave:
Re: how do I center links within a <div> element?
You can also set a class so that the div is centered:
HTML Code:
<div class="centered">Hi, from the middle</div>
CSS Code:
div.centered {
display: table-cell;
width: 500px;
text-align: center;
}
