以HTML和CSS为中心的链接_Html_Css

以HTML和CSS为中心的链接

html css

以HTML和CSS为中心的链接,html,css,Html,Css,我不熟悉HTML和CSS。我试图创建3个中心链接到其他页面，但我不明白为什么它们不中心。CSS代码以HTML内联 a:link， a:参观了{ 背景色：#f44336；颜色：白色；填充：20px 30px；文本对齐：居中；文字装饰：无；显示：内联块；字体大小：30px；字体大小：粗体；浮动：中心； } a:悬停， a:主动的{ 背景色：红色； } h1{ 高度：自动；文本对齐：居中；浮动：中心；字体大小：20px；字体大小：粗体；颜色：黑色；垫面：5px；垫底：5

我不熟悉HTML和CSS。我试图创建3个中心链接到其他页面，但我不明白为什么它们不中心。CSS代码以HTML内联

a:link，
a:参观了{
背景色：#f44336；
颜色：白色；
填充：20px 30px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：30px；
字体大小：粗体；
浮动：中心；
}
a:悬停，
a:主动的{
背景色：红色；
}
h1{
高度：自动；
文本对齐：居中；
浮动：中心；
字体大小：20px；
字体大小：粗体；
颜色：黑色；
垫面：5px；
垫底：5px；
}

Pagrindinis puslapis

将它们包装在div中，并指定

文本对齐：居中用于该分区
此外，也没有所谓的float:center。（感谢您注意到代码中的错误。）

.header{
文本对齐：居中；
}
a:链接，a:已访问{
背景色：#f44336；
颜色：白色；
填充：20px 30px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：30px；
字体大小：粗体；
}
a:悬停，a:活动{
背景色：红色；
}
h1{
高度：自动；
文本对齐：居中；
字体大小：20px；
字体大小：粗体；
颜色：黑色；
垫面：5px；
垫底：5px；
}
Pagrindinis puslapis
显示链接中心对齐的一种方法是将链接包装在div中，并为div赋予display flex属性
float属性只有两个方向：左侧和右侧，中心不存在


div
{      
显示器：flex；
}
a:链接，a:已访问{
背景色：#f44336；
颜色：白色；
填充：20px 30px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：30px；
字体大小：粗体；
}
a:悬停，a:活动{
背景色：红色；
}
h1{
高度：自动；
文本对齐：居中；
字体大小：20px；
字体大小：粗体；
颜色：黑色；
垫面：5px；
垫底：5px；
}
菲律宾互联网
帕格林迪尼斯
在链接周围添加一个容器，并使用该容器将链接与文本对齐：居中对齐

a:链接，a:已访问{
背景色：#f44336；
颜色：白色；
填充：20px 30px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：30px；
字体大小：粗体；
浮动：中心；
}
a:悬停，a:活动{
背景色：红色；
}
h1{
高度：自动；
文本对齐：居中；
字体大小：20px；
字体大小：粗体；
颜色：黑色；
垫面：5px；
垫底：5px；
}
.容器--链接{
文本对齐：居中；
}
Pagrindinis puslapis
只需添加
body{
   text-align: center;
}

快跑
 如果你想采用现代方法，你可以而且应该（！）使用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;
}


帕格林迪尼斯
标题{
保证金：0自动；
最大宽度：700px；
}
答：林克，
a:参观了{
背景色：#f44336；
颜色：白色；
填充：20px 30px；
文本对齐：居中；
文字装饰：无；
字体大小：30px；
字体大小：粗体；
}
a:悬停，
a:主动的{
背景色：红色；
}
.链接包装器{
显示器：flex；
}
h1{
高度：自动；
文本对齐：居中；
浮动：中心；
字体大小：20px；
字体大小：粗体；
颜色：黑色；
垫面：5px；
垫底：5px；
}


任何问题都可以自由提问。
您可以这样做，并将其转化为响应：
<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;
}


帕格林迪尼斯
答：林克，
a:参观了{
背景色：#f44336；
颜色：白色；
填充：20px 30px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：30px；
字体大小：粗体；
浮动：中心；
}
a:悬停，
a:主动的{
背景色：红色；
}
h1{
宽度：100%；
高度：自动；
文本对齐：居中；
字体大小：20px；
字体大小：粗体；
颜色：黑色；
垫面：5px；
垫底：5px；
}
身体{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}

浮动：中心不存在，您可以使用文本对齐：父对象上的中心（此处为主体）可能的重复项您可以使用显示柔体对齐项目：中心；柔性包装：包装；证明内容：中心；给他一个宽度：100%；您应该提到float:center不存在：），并从代码段中删除它。我以前尝试过这样做，但是使用float:center:/@GCyrillus，您是对的。我只是在看链接。你在片段中留下的这个浮动中心呢，您应该指出它不存在，应该删除它。这将是有用的OP学习：）是的，你是对的，它是从上面的css复制的，钢笔更新，谢谢你指出。再一次，你真的没有问题的浮动：中心？lolwas从他的CSS复制，在代码笔上修复它，谢谢