Question

这就是我得到的。我正在尝试将pandora，rocket league和chess.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>

Answer 1

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

http

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

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

Answer 2

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

Answer 3

试试这个：

.hovimg { text-align: center; }

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

Answer 4

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

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

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

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

如何在主div块中居中文本

4 个答案: