how do I center links within a <div> element?

**benmartin101** · May 18th, 2015, 03:10 PM

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.

**NeedSomeAnswers** · May 19th, 2015, 03:36 AM

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;
}

**benmartin101** · May 19th, 2015, 04:23 PM

Thanks!

**NeedSomeAnswers** · May 20th, 2015, 02:48 AM

no problem, mark your thread as resolved using the Thread tools if that has fixed your problem

**SJWhiteley** · May 20th, 2015, 12:50 PM

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;
}

Thread: how do I center links within a <div> element?

Thread Tools

Display

how do I center links within a <div> element?

Re: how do I center links within a <div> element?

Re: how do I center links within a <div> element?

Re: how do I center links within a <div> element?

Re: how do I center links within a <div> element?

Posting Permissions