Question

我需要使用链接做一些事情，我决定将其移动到网站的中间，我已经在寻求帮助，但是没有什么可以帮助我实现我想要的。我希望从中看起来像that:，我知道那个例子看起来不太好，但是至少显示了我想要的东西。目前看来，that

html：

<div id = "header">
 <div class = "headerLinksClass">Lorem Ipsum</div>
 <div class = "headerLinksClass">Lorem Ipsum</div>
 <div class = "headerLinksClass">Lorem Ipsum</div>
 <div class = "headerLinksClass">Lorem Ipsum</div>
 <div style = "clear:both;"></div>
</div>

css：

 #header{ 
 max-width: 1580px;
 margin: auto;
 background-color:white; } 

 .headerLinksClass{
     text-align: center;
     display: block;
     margin: 0 auto;
     float:center;
 }

Answer 1

您尝试过Bootstrap的网格系统吗？

<link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
crossorigin="anonymous">

<div id="header" class="container">
 <div class="row">
  <div class="col-sm-3 headerLinksClass">Lorem Ipsum</div> 
  <div class="col-sm-3 headerLinksClass">Lorem Ipsum</div> 
  <div class="col-sm-3 headerLinksClass">Lorem Ipsum</div> 
  <div class="col-sm-3 headerLinksClass">Lorem Ipsum</div> 
</div>

https://codepen.io/BoucherM/pen/rQveMe?editors=1010

Answer 2

有多种方法可以执行此操作，但是我选择将.headerLinksClass元素的显示属性值更改为行内阻止，并将#header元素上的文本对齐设置为居中。

请参阅下面的演示：

#header {
  max-width: 1580px;
  margin: auto;
  background-color: white;
  text-align: center
}

.headerLinksClass {
  display: inline-block;
}

<div id="header">
  <div class="headerLinksClass">Lorem Ipsum</div>
  <div class="headerLinksClass">Lorem Ipsum</div>
  <div class="headerLinksClass">Lorem Ipsum</div>
  <div class="headerLinksClass">Lorem Ipsum</div>
</div>

Answer 3

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.header {
    background-color: #666;
    padding: 30px;
    text-align: center;
 
    
}


.box1,
.box2,
.box3,
.box4 {
  width: 100px;
  height: 57px;

  display: inline-block;
  *display: inline;
  zoom: 1
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

.box1,
.box3 {
  background: #ccc
}

.box2,
.box4 {
  background: #0ff
}
</style>
</head>
<body>

  <div class = "header">
     
            <div class = "box1">Lorem Ipsum</div>
 <div class = "box2">Lorem Ipsum</div>
 <div class = "box3">Lorem Ipsum</div>
 <div class = "box4">Lorem Ipsum</div>
 <div style = "clear:both;"></div>

</div>

     
</body>
</html>

如何在网站中心设置链接

3 个答案: