Link centering with HTML and CSS
Question
I'm new to HTML and CSS. I'm trying to create 3 centered links to other pages but I can't figure out why they not centered. CSS code is inlined in 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.
6 answers
solution1
3 2017-01-17 17:29:43
Wrap them inside a div and specify text-align:center; for that div.
Also there's no such thing as float:center; . (thanks GCyrillus for noticing the error in the code.)
.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>
solution2
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.
float property only have 2 direction left and right, center does not exist
<!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>
solution3
0 2017-01-17 17:31:11
Add a container around your links and use that to center them with 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>
solution4
0 2017-01-17 17:34:46
Just add
body{
text-align: center;
}
And run !
solution5
0 2017-01-17 17:38:22
If you want a modern approach, you can and should(!) use 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
Any question feel free to ask.
solution6
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.