文章/答案/技术大牛

发布

社区首页 >问答首页 >无法居中文本HTML / CSS

问无法居中文本HTML / CSS
EN

Stack Overflow用户

提问于 2016-07-31 01:56:29

回答 3查看 74关注 0票数 2

我对网络开发非常陌生，我决定做一个小项目以供实践。在过去的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>

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-07-31 02:04:01

当您使用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>

票数 0

Stack Overflow用户

发布于 2016-07-31 02:05:37

h1似乎正在占用h2浮动的所有空间。可以通过将clear: right;添加到样式中，从而防止标题在样式旁边浮动，从而解决这一问题，如下所示：

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

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

票数 0

Stack Overflow用户

发布于 2016-07-31 02:00:20

试试这个：

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

将h1的宽度属性设置为100%，或尝试如下：

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

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38680075

复制

相似问题

问无法居中文本HTML / CSS
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法居中文本HTML / CSSEN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法居中文本HTML / CSS
EN