Question

我对网络开发非常陌生，我决定开展一个小型的实践项目。我花了最后30分钟试图将“创意生活在哪里”的文字直接放在徽标和文字的正下方，但这很困难而且不起作用，任何人都可以帮忙吗？另外，如果你对我到目前为止所做的任何提示，我将非常感谢，谢谢！

这是：

div.header {
    margin-left: auto;
    margin-right: auto;
    width: 440px;
    display: block;
}

h1 {
    font-family: 'Raleway', sans-serif;
    text-align: center;
    font-size: 100px;
    margin-top: auto;
    color: #27ae60;
}

h2 {
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
}

#logo {
    width: 100px;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<!DOCTYPE html>
<html>
<head>
    <title>Reacts</title>
    <link href="styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway|Source+Sans+Pro" rel="stylesheet">
</head>
    
<body>

<div class=header>
<h1 style="float: right;">Reacts</h1>
<img id="logo" style="float: left;" src="Logo.png">
</div>

<h2>Where creativity lives.</h2>
    
</body>
</html>

Answer 1

当您使用float时，它会将所有其他元素放在剩余的空间中。如果您希望它显示在浮动元素下方，请使用clear: both

＆＃13;

div.header {
    margin-left: auto;
    margin-right: auto;
    width: 440px;
    display: block;
}

h1 {
    font-family: 'Raleway', sans-serif;
    text-align: center;
    font-size: 100px;
    margin-top: auto;
    color: #27ae60;
}

h2 {
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
    clear: both; /* <---- Added this */
}

#logo {
    width: 100px;
}

<!-- begin snippet: js hide: false console: true babel: false -->

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>Reacts</title>
    <link href="styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway|Source+Sans+Pro" rel="stylesheet">
</head>
    
<body>

<div class=header>
<h1 style="float: right;">Reacts</h1>
<img id="logo" style="float: left;" src="Logo.png">
</div>

<h2>Where creativity lives.</h2>
    
</body>
</html>

＆＃13;

Answer 2

似乎h1消耗了h2浮动的所有空间。您可以通过向样式添加clear: right;来解决此问题，从而防止标题在其旁边浮动，如下所示：

＆＃13;

div.header {
    margin-left: auto;
    margin-right: auto;
    width: 440px;
    display: block;
}

h1 {
    font-family: 'Raleway', sans-serif;
    text-align: center;
    font-size: 100px;
    margin-top: auto;
    color: #27ae60;
}

h2 {
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
    clear: right;
}

#logo {
    width: 100px;
}

<!-- begin snippet: js hide: false console: true babel: false -->

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>Reacts</title>
    <link href="styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway|Source+Sans+Pro" rel="stylesheet">
</head>
    
<body>

<div class=header>
<h1 style="float: right;">Reacts</h1>
<img id="logo" style="float: left;" src="Logo.png">
</div>

<h2>Where creativity lives.</h2>
    
</body>
</html>

＆＃13;

Answer 3

试试这个：

h1 {
    font-family: 'Raleway', sans-serif;
    width: 100%;
    text-align: center;
    font-size: 100px;
    margin-top: auto;
    color: #27ae60;
}

将h1的 width 属性设置为100％，或尝试：

h1 {
    font-family: 'Raleway', sans-serif;
    margin: 0 auto;
    font-size: 100px;
    color: #27ae60;
}

无法居中文本HTML / CSS

3 个答案: