CODEWITHSUNDEEP
csslayout
Aaron
Aaron

Reputation: 317

horizontally align these CSS divs

I am trying to center the UL list of the following code to center the card container elements. However, after checking tutorials and stack overflow, I cannot seem to locate the issue preventing me from achieving this goal.

Off center and to the left is the result of the code.

HTML Code

<ul class="card-container">
<li><div class="card">
    <div class="card-image">
        <img src="img/Question.png">
    </div>
    <div class="card-theme">
        <a href="#">Should you be here?</a>
    </div>
</div>
</li>
<li><div class="card">
    <div class="card-image">
        <img src="img/Question.png">
    </div>
    <div class="card-theme">
        <a href="#">Should you be here?</a>
    </div>
</div>
</li>
<li>
<div class="card">
    <div class="card-image">
        <img src="img/Question.png">
    </div>
    <div class="card-theme">
        <a href="#">Should you be here?</a>
    </div>
</div>
</li>
</ul>

Corresponding CSS Code

.card-container{
background-color:#0F6;
    width:100%;
    height:auto;
    text-align:center;
    margin:auto 0;  
}
.card-container ul{
    text-align:center;
    margin:auto 0;
}
.card-container li{
    list-style-type:none;
    padding:.5em .5em .5em .5em;
    float:left;
    text-align:left;
}
.card{
    transition: 0.2s;
    overflow:hidden;
    width:7em;
    word-wrap:break-word;
}

.card-image{
    box-shadow:1 1 #000;
    transition:.3s;
    background-color:#C33;
    margin:auto 0;
    text-align:center;
}

.card-image:hover{
    transform:scale(1.25,1.25);
    transform-origin: 50% 50%;
    box-shadow:2 2 #0f0;
}
.card-theme{
    padding: .1em .1em .1em .1em;
    background-color:#999;
    word-wrap: break-word;
}
.card:hover{
box-shadow: 0 5px 5px 0 rgba(0,0,33,1);
}

My target is that the grouping of cards would be centered rather than off-center left.

Guidance would be appreciated.

Thank you.

Upvotes: 1

Views: 5996

Answers (2)

Rohit Verma
Rohit Verma

Reputation: 3785

.card-container {
    text-align:center;
    margin:auto 0;
}
.card-container li{
    list-style-type:none;
    padding:.5em .5em .5em .5em;
	display:inline-block;
    text-align:left;
}
.card{
    transition: 0.2s;
    overflow:hidden;
    width:7em;
    word-wrap:break-word;
}

.card-image{
    box-shadow:1 1 #000;
    transition:.3s;
    background-color:#C33;
    margin:auto 0;
    text-align:center;
}

.card-image:hover{
    transform:scale(1.25,1.25);
    transform-origin: 50% 50%;
    box-shadow:2 2 #0f0;
}
.card-theme{
    padding: .1em .1em .1em .1em;
    background-color:#999;
    word-wrap: break-word;
}
.card:hover{
box-shadow: 0 5px 5px 0 rgba(0,0,33,1);
}
<ul class="card-container">
<li><div class="card">
    <div class="card-image">
        <img src="img/Question.png">
    </div>
    <div class="card-theme">
        <a href="#">Should you be here?</a>
    </div>
</div>
</li>
<li><div class="card">
    <div class="card-image">
        <img src="img/Question.png">
    </div>
    <div class="card-theme">
        <a href="#">Should you be here?</a>
    </div>
</div>
</li>
<li>
<div class="card">
    <div class="card-image">
        <img src="img/Question.png">
    </div>
    <div class="card-theme">
        <a href="#">Should you be here?</a>
    </div>
</div>
</li>
</ul>

You can use display:inline-block; inside li tag and one more thing which is you had already done that is i fixed you can see on first line of CSS.

You have mentioned text-align:center; margin:auto 0; in .card-container ul instead of .card-container

Upvotes: 0

Gerard
Gerard

Reputation: 15796

You can use a flexbox for .card-container

.card-container {
  background-color: #0F6;
  width: 100%;
  height: auto;
  margin: auto 0;
  display: flex;
  justify-content: center;
}

.card-container ul {
  text-align: center;
  margin: auto 0;
}

.card-container li {
  list-style-type: none;
  padding: .5em .5em .5em .5em;
  text-align: left;
}

.card {
  transition: 0.2s;
  overflow: hidden;
  width: 7em;
  word-wrap: break-word;
}

.card-image {
  box-shadow: 1 1 #000;
  transition: .3s;
  background-color: #C33;
  margin: auto 0;
  text-align: center;
}

.card-image:hover {
  transform: scale(1.25, 1.25);
  transform-origin: 50% 50%;
  box-shadow: 2 2 #0f0;
}
<ul class="card-container">
  <li>
    <div class="card">
      <div class="card-image">
        <img src="http://placehold.it/100">
      </div>
      <div class="card-theme">
        <a href="#">Should you be here?</a>
      </div>
    </div>
  </li>
  <li>
    <div class="card">
      <div class="card-image">
        <img src="http://placehold.it/100">
      </div>
      <div class="card-theme">
        <a href="#">Should you be here?</a>
      </div>
    </div>
  </li>
  <li>
    <div class="card">
      <div class="card-image">
        <img src="http://placehold.it/100">
      </div>
      <div class="card-theme">
        <a href="#">Should you be here?</a>
      </div>
    </div>
  </li>
</ul>

Upvotes: 2

Related Questions