how the best way to make something to center

Question

i'm trying to center layout using many ways, but still not find the best way how to do it. in my code below, the button rental not be in center. i think it because the margin-left but i'm not find anything. i'm always have a problem to make something to center. please help how the best way to do it. and can i make a margin between class="val" ?

this is my example code

a.button {
  margin-top: 10px;
  background-color: #008CBA;
  font-size: 16px;
  padding: 12px 28px;
  border-radius: 2px;
  border: 2px solid #008CBA;
  -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: white;
    margin-bottom: 10px;
}
.button:hover {
    background-color: #3399ff;
    color: white;
    border: 3px solid #008CBA;
}
ul{
  list-style-type: none;
    margin-top: 10px;
    padding: 0;
  /*overflow: hidden;*/
  /*width: 20%;*/
    /*margin-bottom: 10PX;*/
}
li{
  float: left;
}
li button {
  background-color: #008CBA;
}

 #pencetan{
   display: table;
  margin: 0 auto;
 }

<div id="pencetan">
<ul>
<li><button id="less">-</button></li>
<li><div id="val">1</div></li>
<li><button id="add">+</button></li>
<ul>
<a href="/details " class="button">Rental</a>
</div>

score 2 · Accepted Answer · answered Jul 18 '18 at 07:03

Use flexbox, pretty good support for all browsers.

Avoid the use of static displays such as table.

a.button {
  margin-top: 10px;
  background-color: #008CBA;
  font-size: 16px;
  padding: 12px 28px;
  border-radius: 2px;
  border: 2px solid #008CBA;
  -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: white;
    margin-bottom: 10px;
}
.button:hover {
    background-color: #3399ff;
    color: white;
    border: 3px solid #008CBA;
}
ul{
    list-style-type: none;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
  /*overflow: hidden;*/
  /*width: 20%;*/
    /*margin-bottom: 10PX;*/
}
li button {
  background-color: #008CBA;
}

 #pencetan{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align: center;
 }

<div id="pencetan">
<ul>
<li><button id="less">-</button></li>
<li><div id="val">1</div></li>
<li><button id="add">+</button></li>
</ul>
<a href="/details " class="button">Rental</a>
</div>

score 1 · Answer 2 · answered Jul 18 '18 at 07:07

your code is centring the content because you have margin: 0 auto on your #pencetan, so this margin: 0 auto translates to the following:

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

About your questions, it really depends on what you want to center.

To align text, you can use CSS text-align Property, see: https://www.w3schools.com/cssref/pr_text_text-align.asp

The text-align property specifies the horizontal alignment of text in an element

div.a {
    text-align: center;
}

To align containers there is different approaches you can use, I would recommend you to have a look on CSS flexbox, see https://css-tricks.com/snippets/css/a-guide-to-flexbox/

you can easily align things like:

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

or even it items:

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

a.button {
  margin-top: 10px;
  background-color: #008CBA;
  font-size: 16px;
  padding: 12px 28px;
  border-radius: 2px;
  border: 2px solid #008CBA;
  -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: white;
    margin-bottom: 10px;
}
.button:hover {
    background-color: #3399ff;
    color: white;
    border: 3px solid #008CBA;
}
ul{
  list-style-type: none;
    margin-top: 10px;
    padding: 0;
  /*overflow: hidden;*/
  /*width: 20%;*/
    /*margin-bottom: 10PX;*/
}
li{
  float: left;
}
li button {
  background-color: #008CBA;
}

 #pencetan{
   display: table;
  margin: 0;
 }

<div id="pencetan">
<ul>
<li><button id="less">-</button></li>
<li><div id="val">1</div></li>
<li><button id="add">+</button></li>
<ul>
<a href="/details " class="button">Rental</a>
</div>

how the best way to make something to center

2 Answers2