如何在主div块中居中文本

时间:2017-02-28 19:02:49

标签: html css

这就是我得到的。我正在尝试将pandorarocket leaguechess.com置于#header div中。现在他们在左边。

<!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>

4 个答案:

答案 0 :(得分:0)

我不确定这是不是你想要的。

http

这将使标题分区的内容居中。 如果你想将它添加到你的CSS:

var embed = "http://www.youtube.com";  
window.open(embed);

答案 1 :(得分:0)

如果您希望所有内容都在中心,那么您可以将text-align: center应用于#header

答案 2 :(得分:0)

试试这个:

.hovimg { text-align: center; }

你的a标签,跨度和图像(默认为内联元素)所在的块元素的类是 - 它应该将它们居中(所有在一起 - 它们在一行中)

答案 3 :(得分:0)

我有点卡住试图找出你之后的确切内容,但这里有一个解决方案,可能就是你所追求的:

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

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

注意:尚未经过测试,因此可能无法使用,但至少应该使用此理念背后的理论。