<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 4 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 4 年前。
如何将文本与屏幕中心对齐,链接背景为蓝色。不改变 HTML 代码,只改变 CSS 代码。 我正在使用 Display Inline 和 Align Text: Center 但它不起作用。 在链接部分,我想将它对齐到中心顶部并且应该固定。
https://notepad.pw/css1234 (对于 css 文件)
https://notepad.pw/html1234 (对于 html 文件)
最佳答案
body{}
中添加 text-align: center;
width: 100%;
p
居中对齐 body
width: 100%
,背景颜色将仅适合内容(在本例中为链接)。请运行下面的代码,看看这是否是您所要求的。
/* This is a partial blocks.css, you need to add more rules
to this file to complete the assignment. Do not add any CSS
styling to the original index.htm / start.htm */
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
}
/* Here is one of many CSS rules you will need... */
#three{
position: fixed;
border: 5px solid #fea405;
margin: 5px;
padding: 5px;
width: 25%;
top: 0;
}
#two{
position: fixed;
border: 5px solid #048103;
margin: 5px;
padding: 5px;
width: 25%;
top: 0;
right: 0;
}
#four{
position: fixed;
border: 5px solid #ffff00;
margin: 5px;
padding: 5px;
width: 25%;
bottom: 0;
}
#one{
position: fixed;
border: 5px solid #0201ff;
margin: 5px;
padding: 5px;
width: 25%;
bottom: 0;
right: 0;
}
#link
{
text-align: center;
color: white;
background-color:#0201ff;
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<title>Blocks</title>
<!-- Do not change this file - add your CSS styling
rules to the blocks.css file included below -->
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="one">
Turns out you have a really fun time if you
go to work every day and focus on being
silly and funny and happy! - Hannah Murray
</div>
<div id="two">
All you need in this life is ignorance and confidence,
and then success is sure. - Mark Twain
</div>
<div id="three">
Well, if crime fighters fight crime and fire fighters
fight fire, what do freedom fighters fight? They never
mention that part to us, do they? - George Carlin
</div>
<div id="four">
Great minds discuss ideas; average minds discuss events;
small minds discuss people. - Eleanor Roosevelt
</div>
<p id="link">
<a href="https://www.brainyquote.com/" target="_blank">
Brainy Quote
</a>
</p>
</body>
</html>
关于html - 仅针对文本将文本与背景色居中对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49617163/
相关文章:
javascript - 遵循 url 方案后与 HTML5 Web SQL 的连接丢失
javascript - Sencha Touch 在导航 View 中自定义导航栏
javascript - 禁用 iPhone "save image"弹出窗口
javascript - 具有父级宽度的 Google 饼图
javascript - 通过Javascript触发<a href =""/>的点击(跨浏览器解决方案)
html - 使用 html 和 css 在其下方打印带有表格数据的静态 header
javascript - 悬停时播放声音 <a attribute with image inside it> 它不能正常工作