CODEWITHSUNDEEP
htmlcss
Vidma
Vidma

Reputation: 11

Link centering with HTML and CSS

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.

Upvotes: 1

Views: 65

Answers (6)

Paulo Mora
Paulo Mora

Reputation: 249

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

Upvotes: 0

ab29007
ab29007

Reputation: 7756

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>

Upvotes: 3

Pedro Bras
Pedro Bras

Reputation: 101

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.

Upvotes: 0

Tim Barnett
Tim Barnett

Reputation: 1013

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>

Upvotes: 0

Deep
Deep

Reputation: 9804

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>

Upvotes: 0

jobair ahmed
jobair ahmed

Reputation: 121

Just add 

body{
   text-align: center;
}

And run !

Upvotes: 0

Related Questions