1

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.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Vidma
  • 11
  • 2
  • float:center do not exist, you may use text-align:center on parent (here body ) – G-Cyrillus Jan 17 '17 at 17:30
  • Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) – BSMP Jan 17 '17 at 17:35
  • you can use display flex on body align-items: center; flex-wrap: wrap; justify-content: center; and on the

    give him width:100%;

     – Paulo Mora Jan 17 '17 at 17:35

6 Answers6

3

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>
Community
  • 1
  • 1
ab29007
  • 7,611
  • 2
  • 17
  • 43
0

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>
Deep
  • 9,594
  • 2
  • 21
  • 33
0

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>
Tim Barnett
  • 1,012
  • 5
  • 9
0

Just add 

body{
   text-align: center;
}

And run !

jobair ahmed
  • 141
  • 1
  • 9
0

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.

Pedro Bras
  • 101
  • 5
  • 1
    what about this float center you left hanging around in the snippet ? , you should point out that it does not exist and should be removed. It will be usefull for the OP to learn something :) – G-Cyrillus Jan 17 '17 at 17:43
  • Yeah you are right, it was copied from the css above, pen updated, thanks for pointing out. – Pedro Bras Jan 17 '17 at 17:49
0

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

Paulo Mora
  • 229
  • 2
  • 10