html - 仅针对文本将文本与背景色居中对齐

标签 html css

<分区>


关闭 4 年前

如何将文本与屏幕中心对齐,链接背景为蓝色。不改变 HTML 代码,只改变 CSS 代码。 我正在使用 Display Inline 和 Align Text: Center 但它不起作用。 在链接部分,我想将它对齐到中心顶部并且应该固定。

https://notepad.pw/css1234 (对于 css 文件)

https://notepad.pw/html1234 (对于 html 文件)

最佳答案

你想要什么

  • 将文本与屏幕中心对齐,链接背景为蓝色
  • 仅更改 CSS 代码
  • 链接应居中对齐并固定

修改

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

上一篇:css - "Optimize CSS Delivery"- 为什么 Google 使用这么多代码来加载 CSS 文件?

下一篇:css - 在 IE11 中使用安装的字体与 webfont 时打开 Sans 字体更粗

相关文章:

javascript - 遵循 url 方案后与 HTML5 Web SQL 的连接丢失

javascript - Sencha Touch 在导航 View 中自定义导航栏

html - 仅显示单击元素 Angular 2 的类

javascript - 禁用 iPhone "save image"弹出窗口

jquery - 使用 jquery 隐藏表的列/td

javascript - 具有父级宽度的 Google 饼图

javascript - 通过Javascript触发<a href =""/>的点击(跨浏览器解决方案)

html - 使用 html 和 css 在其下方打印带有表格数据的静态 header

javascript - 悬停时播放声音 <a attribute with image inside it> 它不能正常工作

css - 在 div 上显示无/ block 不起作用