0 Users appreciate this thread.
I need help.
This topic is closed, so you can not post a comment.
Back to forum: Web Programming (HTML, JS, CSS, PHP, MySQL)
New registered users today: 7
Newest registered user: ElegantVulpes
Back to the menu
0 Users appreciate this thread.
Back to forum: Web Programming (HTML, JS, CSS, PHP, MySQL)
New registered users today: 7
Newest registered user: ElegantVulpes
How would I center a div with inline-block?
If I remove inline-block, then multiple divs stack on top of each other for some reason.
Here's the code I'm working with:
<html>
<head>
<title>Spectres - Others</title>
<link type="text/css" rel="stylesheet" href="stylesheet2.css" />
</head>
<body>
<div id="content">
<div id="ally_content">
<p class="p_center">Allies:</p>
<div class="ally"><p>Example 1</p></div>
<div class="ally"><p>Example 2</p></div>
</div>
<div id="neutral_content">
<p class="p_center">Pending:</p>
<div class="neutral"><p>Legion</p></div>
</div>
<div id="enemy_content">
<p class="p_center">Enemies:</p>
<div class="enemy"><p>N/A</p></div>
</div>
</div>
</body>
</html>
display: inline-block;
position: relative;
height: 100px;
width: 100px;
border-radius: 100%;
border: 2px solid black;
text-align: center;
margin: 5px auto;
}
div.ally p, div.neutral p, div.enemy p{
position: relative;
margin-top: 40px;
font-weight: bold;
}
.ally{
border: 2px dashed blue;
}
#ally_content, #neutral_content, #enemy_content{
border: 1px solid #cccccc;
border-radius: 20px;
margin: 5px ;
}
.neutral{
border: 2px dashed #696969;
}
.enemy{
border: 2px dashed red;
}
*{
font-family: Helvetica;
}
#list{
margin:auto;
}
#content{
border: 1px solid #e5e5e5;
border-radius: 25px;
padding: auto;
margin: 5px auto;
}
.p_center{
text-align: center;
padding: 0px;
}
2013-03-02 04:59:13