链接以HTML和CSS为中心
[英]Link centering with HTML and CSS
问题描述
I'm new to HTML and CSS. 
我是HTML和CSS的新手。 I'm trying to create 3 centered links to other pages but I can't figure out why they not centered. 我正在尝试创建3个居中链接到其他页面，但我无法弄清楚为什么他们不居中。 CSS code is inlined in HTML. CSS代码以HTML格式内联。
a:link, a:visited { background-color: #f44336; color: white; padding: 20px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 30px; font-weight: bold; float: center; } a:hover, a:active { background-color: red; } h1 { height: auto; text-align: center; float: center; font-size: 20px; font-weight: bold; color: black; padding-top: 5px; padding-bottom: 5px; }
<h1>Pagrindinis puslapis</h1> <a href="php.html">PHP puslapis</a> <a href="ruby.html">Ruby puslapis</a> <a href="python.html">Python puslapis</a>
I tried to add float: center in a:link but it nothing changed. 我试图在一个：链接中添加float：center但它没有任何改变。
6 个解决方案
解决方案1
3 2017-01-17 17:29:43
Wrap them inside a div and specify text-align:center; 将它们包装在div中并指定text-align:center; for that div. 为那个div。
Also there's no such thing as float:center; 也没有float:center;物这样的东西float:center; . 。 (thanks GCyrillus for noticing the error in the code.) （感谢GCyrillus注意到代码中的错误。）
.header{ text-align:center; } a:link, a:visited { background-color: #f44336; color: white; padding: 20px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 30px; font-weight:bold; } a:hover, a:active { background-color: red; } h1{ height:auto; text-align:center; font-size:20px; font-weight:bold; color:black; padding-top: 5px; padding-bottom: 5px; }
<h1>Pagrindinis puslapis</h1> <div class="header"> <a href="php.html">PHP puslapis</a> <a href="ruby.html">Ruby puslapis</a> <a href="python.html">Python puslapis</a> <div>
解决方案2
0 2017-01-17 17:30:51
One way to display links central aligned could be to wrap links inside a div and give the div a display flex property. 显示中心对齐链接的一种方法是将div中的链接包装起来，并为div提供display flex属性。
float property only have 2 direction left and right, center does not exist float属性只有左右两个方向，中心不存在
<!DOCTYPE html> <html> <head> <style TYPE="text/css"> div { display : flex; } a:link, a:visited { background-color: #f44336; color: white; padding: 20px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 30px; font-weight:bold; } a:hover, a:active { background-color: red; } h1{ height:auto; text-align:center; font-size:20px; font-weight:bold; color:black; padding-top: 5px; padding-bottom: 5px; } </style> <title>PHP internetiniu svetainiu puslapiai</title> </head> <body> <h1>Pagrindinis puslapis</h1> <div> <a href="php.html">PHP puslapis</a> <a href="ruby.html">Ruby puslapis</a> <a href="python.html">Python puslapis</a> </div> </body> <html>
解决方案3
0 2017-01-17 17:31:11
Add a container around your links and use that to center them with text-align: center; 在链接周围添加一个容器，并使用text-align: center;
a:link, a:visited { background-color: #f44336; color: white; padding: 20px 30px; text-align: center; text-decoration: none; display: inline-block; font-size: 30px; font-weight:bold; float: center; } a:hover, a:active { background-color: red; } h1{ height:auto; text-align:center; font-size:20px; font-weight:bold; color:black; padding-top: 5px; padding-bottom: 5px; } .container--links{ text-align: center; }
<h1>Pagrindinis puslapis</h1> <div class="container--links"> <a href="php.html">PHP puslapis</a> <a href="ruby.html">Ruby puslapis</a> <a href="python.html">Python puslapis</a> </div>
解决方案4
0 2017-01-17 17:34:46
Just add 只需添加
body{
text-align: center;
}
And run ! 跑！
解决方案5
0 2017-01-17 17:38:22
If you want a modern approach, you can and should(!) use flexbox. 如果你想要一种现代的方法，你可以而且应该（！）使用flexbox。
If do some research on it you will see that centering horizontally and vertically are a breeze. 如果对它进行一些研究，你会发现水平和垂直居中是一件轻而易举的事。
Here is a pen demoing it: 这是一支笔演示它：
<header>
<h1>Pagrindinis puslapis</h1>
<div class="link-wrapper">
<a href="php.html">PHP puslapis</a>
<a href="ruby.html">Ruby puslapis</a>
<a href="python.html">Python puslapis</a>
</div>
<header>
header {
margin: 0 auto;
max-width: 700px;
}
a:link,
a:visited {
background-color: #f44336;
color: white;
padding: 20px 30px;
text-align: center;
text-decoration: none;
font-size: 30px;
font-weight: bold;
}
a:hover,
a:active {
background-color: red;
}
.link-wrapper {
display: flex;
}
h1 {
height:auto;
text-align:center;
float:center;
font-size:20px;
font-weight:bold;
color:black;
padding-top: 5px;
padding-bottom: 5px;
}
http://codepen.io/pedromrb/pen/wgopaB http://codepen.io/pedromrb/pen/wgopaB
Any question feel free to ask. 任何问题随时都可以问。
解决方案6
0 2017-01-17 17:41:23
You can do like this and turn it responsive : 您可以这样做，并将其转为响应：
<body>
<h1>Pagrindinis puslapis</h1>
<a href="php.html">PHP puslapis</a>
<a href="ruby.html">Ruby puslapis</a>
<a href="python.html">Python puslapis</a>
</body>
a:link,
a:visited {
background-color: #f44336;
color: white;
padding: 20px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 30px;
font-weight: bold;
float: center;
}
a:hover,
a:active {
background-color: red;
}
h1 {
width:100%;
height: auto;
text-align: center;
font-size: 20px;
font-weight: bold;
color: black;
padding-top: 5px;
padding-bottom: 5px;
}
body {
display:flex;
flex-wrap:wrap;
justify-content:center;
}
http://codepen.io/Just14/pen/ZLBvby http://codepen.io/Just14/pen/ZLBvby
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.