How to center text in main div block

Question

Here's what I got. I'm trying to center pandora, rocket league and chess.com in the #header div. Right now they're on the left.

<!DOCTYPE html>
<html>
<head></head>
<body>

<link type="text/css" rel="stylesheet" href="abc.css"/>

<div id="top"></div>

<div id="header">
    <div class="hovimg">
        <a href="https://www.chess.com">
            Chess.com
            <span>
                <img src="https://tmp-m.org/wp-content/uploads/2015/02/chess.jpg" height="100px" width="180px"/>
            </span>
        </a>
    </div>
    <div class="hovimg">
        <a href="https://www.pandora.com">
            Pandora
            <span>
                <img src="https://c.slashgear.com/wp-content/uploads/2016/10/pandora-rebrand-980x420.png" height="100px" width="150px"/>
            </span>
        </a>
    </div>
    <div class="hovimg">
        <a href="steam://rungameid/252950">
            Rocket League
            <span>
                <img src="http://static5.gamespot.com/uploads/screen_kubrick/1551/15511094/2999833-20141023_rocketleague_01.jpg" height="120px" width="200"/>
            </span>
        </a>
    </div>
</div>
<div id="left"></div>

</body>
</html>

score 1 · Accepted Answer · answered Mar 01 '17 at 00:28

1

I'm a little stuck trying to figure out exactly what you're after, but here's one solution that may be what you're after:

.header:after { /* Clearfix */
  content: "";
  display: table;
  clear: both;
}

.hovimg {
  width: calc(100% / 3);
  float: left;
}

Note: Has not been tested, so it is possible this may not work, however at least the theory behind this idea should be of use.

answered Mar 01 '17 at 00:28

Michael Longhurst

1,750
2
10
11

Awesome, that did it! Not completely sure why though. I don't get what the content "" means and why you cleared both on header. Please explain, thanks. – Daniel Archuleta Mar 01 '17 at 04:49
@DanielArchuleta The styles under `.header:after` are those for clearfix. When you float an element, it's parent needs to be cleared to ensure the flow of the document doesn't break. Check [here](http://stackoverflow.com/questions/8554043/what-is-a-clearfix) for more info. – Michael Longhurst Mar 10 '17 at 17:13
@DanielArchuleta Mind me asking you to mark this as successfully answering your question? It would be appreciated :) – Michael Longhurst Mar 11 '17 at 19:13

score 0 · Answer 2 · answered Feb 28 '17 at 19:11

0

I am not sure if that's what you are looking for.

<div id="header" style="text-align:center">

This will center the content of the header division. If you want to add it to your CSS:

#header{
    text-align: center; 
}

answered Feb 28 '17 at 19:11

EddyG

2,051
3
22
46

score 0 · Answer 3 · answered Feb 28 '17 at 19:12

0

If you want all content in the center then you can apply text-align: center to #header.

answered Feb 28 '17 at 19:12

James

303
2
12

This still didn't work. I think it's cuz it's not the text in between the initial div's but it's text of the tag. Any other suggestions? – Daniel Archuleta Feb 28 '17 at 22:05

score 0 · Answer 4 · answered Feb 28 '17 at 23:53

0

Try this:

.hovimg { text-align: center; }

That's the class of the block elements your a tags, spans and images (which are inline elements by default) are in - it should center them (all together - they are in one line).

answered Feb 28 '17 at 23:53

Johannes

64,305
18
73
130

How to center text in main div block

4 Answers4