你想要什么

Question

如何将文本与屏幕中心对齐，并将链接背景设为蓝色。不改变HTML代码并仅改变CSS代码。我正在使用显示内联和对齐文本：中心，但它无法正常工作。在链接部分中，我想将其与中心顶部对齐，并且应该修复。

https://notepad.pw/css1234（对于css文件）

https://notepad.pw/html1234（对于html文件）

Answer 1

你想要什么

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

修改

在text-align: center;

body{}

删除width: 100%;

解释

这会将p居中对齐body
删除width: 100%后，背景颜色只适合内容（在这种情况下是链接）。

请运行以下代码，看看这是否是您的要求。

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

Answer 2

的CSS：

<style>
div
{
text-align:center; 
background-color:red;
}

.linkFrame
{
margin: 0 auto;
background-color: blue;
width:20%;
height: 100%;
}
.linkFrame a
{
color: white;
}
</style>

HTML：

<div><div class="linkFrame"><a href="#">YourText</a></div></div>

Tryit Editor链接：https://www.w3schools.com/code/tryit.asp?filename=FPYX1DG3O9GQ

Answer 3

您必须使用以下代码替换为 #link 编写的小css代码：

#link{
   text-align: center;
}
#link a{
   background-color:#0201ff;
   color: white;
}

Refer the code with ouput

将文本与中心对齐仅为文本的背景颜色

3 个答案:

你想要什么

修改

解释