gpt4 book ai didi

html - 无法将文本 HTML/CSS 居中

转载 作者:行者123 更新时间:2023-11-28 03:50:30 25 4
gpt4 key购买 nike

我是网络开发的新手,因此我决定从事一个小元素进行练习。在过去的 30 分钟里,我一直试图将“创意所在”文本置于 Logo 和文本正下方的中心位置,但是这很困难而且不起作用,有人可以帮忙吗?另外,如果您对我目前所做的工作有任何建议,我将不胜感激!

这里是:

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>

最佳答案

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

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

关于html - 无法将文本 HTML/CSS 居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38680075/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com