Align center

HTML & CSS
1 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>spanLogo2</title>
<style type="text/css">


*{margin:0;padding:0}
.inline-block{display:inline-block}
.bdr3{border:2px solid #00f}
.pdg5{padding:5px}
.bdr15{border-radius:15px}

.floatRight {float:right}

.backgroundYellow{background:yellow}

</style>
</head>
<body class="pdg5">

<div style="background:yellow">
  <span class="inline-block bdr3 pdg5 bdr15">logo  9999</span>
  [COLOR="#FF0000"]center[/COLOR]
  <span class="inline-block bdr3 pdg5 bdr15 floatRight">logIn 555</span>
</div>
</body>
</html>

I have the code above and its output at http://dot.kr/x-test/layOut/spanLogo2.php
I like to make the text center to be centered.

The code below is one of my trials for it.


.marginAuto{margin:auto}

<span [COLOR="#FF0000"]class="maginAuto"[/COLOR]>center</span>
2

Anything set to inline or inline-block is only as wide as it needs to be to contain its contents. So aligning or centering the text within the <span> makes no difference, because the <span> is exactly as wide as the text and no more. You need to put text-align:center; on the <div>, not the <span>.

3

The code below is the version of DIV at http://dot.kr/x-test/layOut/divLogo2.php, instead of SPAN at http://dot.kr/x-test/layOut/spanLogo2.php.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>round corners</title>
<style type="text/css">

*{margin:0;padding:0}
.inline-block{display:inline-block}
.bdr3{border:2px solid #00f}
.pdg5{padding:5px}
.bdr15{border-radius:15px}
.floatRight {float:right}
.backgroundYellow{background:yellow}	
</style>
</head>

<body class="pdg5">

<div class="backgroundYellow">
  <div class="inline-block bdr3 pdg5 bdr15">logo</div>
  [COLOR="#FF0000"]center[/COLOR]
  <div class="inline-block bdr3 pdg5 bdr15 floatRight">logIn</div>
</div>
</body>
</html>

In order to make the text “center”, I tried like the below at http://dot.kr/x-test/layOut/divLogo2_1.php.

.marginAuto{margin:auto}

<div class="maginAuto">center</div>

The output of the code above is that the text “center” and the box “logIn” are unexpectedly dropped.

4

Ah, I see what you are trying to do now.

What you need to do is to have something like this:

<div id="top-bar">
<div id="login">Log in</div>
<div id="logo">Logo</div>
Center</div>

#top-bar {background:yellow; text-align:center; overflow:hidden;}
#login {float:right; border:2px solid #00f; border-radius:15px; padding: 5px}
#logo {float:left; border:2px solid #00f; border-radius:15px; padding: 5px}

Note the order - you have the float:right first, then the float:left, then the middle text. If you do it in any other order it will break. Notice also the meaningful names I’ve given to the styles, rather than defining each individual bit of styling separately.

5

Your code works fine at http://dot.kr/x-test/layOut/3cols.php.

I like to make the text “center” in a pink box, so I made the code below at http://dot.kr/x-test/layOut/3cols2.php
.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>round corners</title>
<style type="text/css">
#top-bar {background:yellow;text-align:center;overflow:hidden;}
#login{float:right;border:2px solid #00f;border-radius:15px;padding: 5px}
#logo{float:left;border:2px solid #00f;border-radius:15px;padding: 5px}

[COLOR="#FF0000"]#center{background:pink;margin:auto;padding:5px}[/COLOR]
</style>
</head>
<body class="pdg5">


<div id="top-bar">
  <div id="login">Log in</div>
  <div id="logo">Logo</div>
  [COLOR="#FF0000"]<div id="center">center<div>[/COLOR]
</div>


</body>
</html>

The pink box is unexpectedly widely speaded with the code above.
How can I put the pink box in the center, as small as the text “center” instead of spreaded widely.

6

A few options, such as

#center {display: table;}
7

display:inline-block should do the trick.