KKZiomek KKZiomek -4 years ago 47
CSS Question

Center tag not working properly

I had my frame design and I wanted to experiment inside the #content div now. I wanted to center a text, but it is not working properly.

It can be seen on my page.

The most important parts (after removal of script and other link tags) of index.HTML can be seen here:



body {
font-family: "PT Sans";
background-color: #dfc;
color: #000;
}

.top {
width: 100%;
height: 50px;
position: fixed;
left: 0;
top: 0;
background-color: #5dbf61;
z-index: 100;
}

.stickyTop {
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 100;
}

.logo {
display: block;
font-size: 26px;
padding: 5px;
padding-left: 10px;
text-align: center;
letter-spacing: 1px;
}

.logo a {
text-decoration: none;
color: #fff;
cursor: pointer;
}

.sidebar {
width: 250px;
height: 100%;
position: fixed;
left: 0;
top: 50px;
background-color: #4caf50;
z-index: 99;
overflow-y: auto;
overflow-x: none;
}

.stickySidebar {
height: 100%;
position: fixed;
left: 0;
top: 50px;
z-index: 99;
}

.sidebar>.option {
height: 42px;
line-height: 40px;
width: 100%;
left: 0;
display: inline-block;
text-indent: 12px;
color: #dfc;
}

.sidebar a {
display: block;
text-decoration: none;
color: #dfc;
}

.sidebar>.option:hover {
background-color: #8bc34a;
}

.sidebar>.selected {
height: 42px;
line-height: 40px;
width: 100%;
left: 0;
display: inline-block;
background-color: #8bc34a;
text-indent: 12px;
color: #dfc;
}

.sidebar>.panel {
width: 226px;
/*250 - 12 - 12*/
left: 0;
display: inline-block;
padding: 12px;
color: #dfc;
font-size: 14px;
}

.sidebar>.empty {
height: 42px;
width: 100%;
left: 0;
display: inline-block;
text-indent: 12px;
color: #dfc;
}

.sidebar>.empty-border {
height: 42px;
width: 100%;
left: 0;
display: inline-block;
text-indent: 12px;
color: #dfc;
}

.navbar {
width: 100%;
height: 26px;
left: 250px;
top: 50px;
position: fixed;
display: block;
z-index: 99;
padding-left: 9px;
padding-top: 4px;
border-bottom: 2px solid #9b8;
background-color: #bda;
color: #796;
font-size: 14px;
}

.stickyNavbar {
height: 100%;
position: fixed;
left: 250px;
top: 50px;
z-index: 99;
}

.navbar a {
color: #796;
}

.content {
width: 100%;
height: 100%;
left: 250px;
top: 76px;
position: fixed;
display: block;
padding: 15px;
}

.spaced-text {
letter-spacing: 1px;
}

.fixed-center {
width: 100%;
display: block;
text-align: center;
}

<div id="container">
<div class="top">
<div class="logo">
<a href="#"><b>Nieposortowane</b></a>
</div>
</div>
<div class="sidebar">
<div class="option"><a href="#">Strona Główna</a></div>
<div class="option"><a href="#">Przyklad 1</a></div>
<div class="selected"><a href="#">Może coś tu będzie</a></div>
<div class="option"><a href="#">Strona Niegłówna</a></div>
<div class="empty-border"></div>
<div class="panel" id="info">
<b class="spaced-text">Informacje o stronie</b><br/><br/> Ta strona jeszcze nie jest stroną, bo trwa robienie designu. Lorem ipsum dolor sit amet jakoś tak cośtam dalej nie pamiętam a nie chce mi się kopiować.
</div>
<div class="panel" id="style-switcher">
<b class="spaced-text">Wybieranie stylu strony</b><br /><br />
<b>Styl strony:</b><br />
<input type="radio" id="style_1" name="design" onclick="update();" checked>Normalny</input><br />
<input type="radio" id="style_2" name="design" onclick="update();">Dark</input><br />
</div>
<div class="panel" id="footer">
<b>Nieposortowane.pl &copy; 2017<br />
Karol Turbiarz</b><br /><br /> Wszelkie prawa zastrzeżone<br /> All rights reserved
</div>
<br /><br />
</div>
<div class="navbar">
<a href="#">Nieposortowane.pl</a> > <a href="#">Strona główna</a>
</div>
<div class="content">
<center>a</center>
</div>
</div>





You can see how the center is off much to the right. How can it be fixed?

Answer Source

The Issues:

1. <center> is obsolete, so we'll use CSS instead (text-align: center; on the parent element will work the same as <center>)

2. Your content div is way larger than the size of the page, therefore the text is centered properly, it's your content div's width that's the problem.


A piece of personal advice:

Truthfully, this page is a mess. You have nearly no elements "in-the-flow" because nothing is relatively positioned. Fixing the issue you've pointed out is sort of like building a house on top of quicksand, and then asking how to fix the dripping pipe in your kitchen.

The less position: absolute; and position: fixed; elements you can use, the better off you'll be when it comes to general page structure. In some cases absolute-positioning might be exactly what you need, but most of the time you want the page to flow. The items should be properly nested within one another, and they should position and align themselves without relying on hard-coded positional attributes.

Down the line, some common, modern techniques include flexbox and grid, though I personally have always been an advocate of learning the basics beforehand.

You can't do the high-dive if you don't first learn how to swim!


Despite that, if you're really in a pinch, here's a quick solution:

Change your content div to be 100% of the width of the page, but compensate for the 250px sidebar, by using calc().

Additionally, border and padding are additive by default, meaning 20px of total padding and a width of 500px results in a 520px true-width. We can avoid this behavior by implementing box-sizing: border-box, which applies padding and borders inward instead of outward.

.content {
    width: calc(100% - 250px);
    box-sizing: border-box;
    text-align: center;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download