How to set links on center of site

Question

I need to make something with my links, i decided to move it on middle of site, i've already look for a help, but nothing was help me to make it that as i want. I want from it to look like that: I know, that example wasn't look so good, but atleast it showing what i want. For now,it's look like 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;
 }

Possible duplicate of [How to horizontally center a
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div) — Estevan Maito, Nov 23 '18 at 18:26

score 0 · Answer 1 · answered Nov 23 '18 at 18:14

Did you try bootstrap's grid system?

<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

score 0 · Answer 2 · answered Nov 23 '18 at 18:15

There are a number of ways to do this but I chose to change the display property value of the .headerLinksClass elements to inline-block and set text-align on the #header element to center.

See below for a demo:

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

score 0 · Answer 3 · answered Nov 23 '18 at 18:21

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

How to set links on center of site

3 Answers3