Question

我是HTML和CSS的新手。我试图创建3个中心链接到其他页面，但我无法弄清楚它们为什么不居中。 CSS代码以HTML格式内联。

＆＃13;

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

＆＃13;

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

＆＃13;

我尝试在一个：链接中添加float：center但是没有任何改变。

Answer 1

将它们包裹在div中并为该div指定text-align:center;。

也没有float:center;之类的东西。（感谢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>

Answer 2

显示中心对齐链接的一种方法是将div中的链接包装起来，并为div提供显示flex属性。

浮动属性只有左右两个方向，中心不存在

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

Answer 3

在链接周围添加一个容器，并使用该容器将其与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>

Answer 4

添加

body{
   text-align: center;
}

然后跑！

Answer 5

如果你想要一种现代的方法，你可以而且应该（！）使用flexbox。

如果对它进行一些研究，你会发现水平和垂直居中都是轻而易举的。

这是一支演示它的笔：

<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

任何问题随时都可以问。

Answer 6

你可以这样做，并将其转为响应：

@Component
public class LocalizedMessageProvider {

    @Autowired
    private MessageSource messageSource;

    public String getMessage(String code , Object... arguments) {
        Locale locale = LocaleContextHolder.getLocale();
        return messageSource.getMessage(code, arguments, locale);
    }
}

http://codepen.io/Just14/pen/ZLBvby

链接以HTML和CSS为中心

6 个答案: