How to set links on center of site

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;

 }

asked Nov 23 '18 at 17:35

Tymbar

Possible duplicate of How to horizontally center a <div>?

– estevan
Nov 23 '18 at 18:26

add a comment |

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;

 }

asked Nov 23 '18 at 17:35

Tymbar

Possible duplicate of How to horizontally center a <div>?

– estevan
Nov 23 '18 at 18:26

add a comment |

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;

 }

asked Nov 23 '18 at 17:35

Tymbar

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;

 }

html css

asked Nov 23 '18 at 17:35

Tymbar

asked Nov 23 '18 at 17:35

Tymbar

asked Nov 23 '18 at 17:35

Tymbar

asked Nov 23 '18 at 17:35

Tymbar

asked Nov 23 '18 at 17:35

Tymbar

Possible duplicate of How to horizontally center a <div>?

– estevan
Nov 23 '18 at 18:26

add a comment |

Possible duplicate of How to horizontally center a <div>?

– estevan
Nov 23 '18 at 18:26

Possible duplicate of How to horizontally center a <div>?

– estevan
Nov 23 '18 at 18:26

add a comment |

3 Answers
3

active

oldest

votes

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

answered Nov 23 '18 at 18:14

Mark B

6619

add a comment |

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>

answered Nov 23 '18 at 18:15

Danny

8791210

add a comment |

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

answered Nov 23 '18 at 18:21

i_th

1,150718

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53450919%2fhow-to-set-links-on-center-of-site%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

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

answered Nov 23 '18 at 18:14

Mark B

6619

add a comment |

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

answered Nov 23 '18 at 18:14

Mark B

6619

add a comment |

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

answered Nov 23 '18 at 18:14

Mark B

6619

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

answered Nov 23 '18 at 18:14

Mark B

6619

answered Nov 23 '18 at 18:14

Mark B

6619

answered Nov 23 '18 at 18:14

Mark B

6619

answered Nov 23 '18 at 18:14

Mark B

6619

add a comment |

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>

answered Nov 23 '18 at 18:15

Danny

8791210

add a comment |

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>

answered Nov 23 '18 at 18:15

Danny

8791210

add a comment |

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>

answered Nov 23 '18 at 18:15

Danny

8791210

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>

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

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

answered Nov 23 '18 at 18:15

Danny

8791210

answered Nov 23 '18 at 18:15

Danny

8791210

answered Nov 23 '18 at 18:15

Danny

8791210

answered Nov 23 '18 at 18:15

Danny

8791210

add a comment |

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

answered Nov 23 '18 at 18:21

i_th

1,150718

add a comment |

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

answered Nov 23 '18 at 18:21

i_th

1,150718

add a comment |

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

answered Nov 23 '18 at 18:21

i_th

1,150718

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

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

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

answered Nov 23 '18 at 18:21

i_th

1,150718

answered Nov 23 '18 at 18:21

i_th

1,150718

answered Nov 23 '18 at 18:21

i_th

1,150718

answered Nov 23 '18 at 18:21

i_th

1,150718

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg