1. 首頁
  2. 問答
  3. 我該如何水平居中3個div？

我該如何水平居中3個div？

2017-04-04 51 views
3

所以我有3張卡片，我要把我的項目放在裏面，我需要它們水平地居中。我嘗試了很多東西，但目前爲止還沒有成功。我該如何水平居中3個div？

這是卡的代碼。 

.card { 
 
    background: #fff; 
 
    border-radius: 3px; 
 
    display: inline-block; 
 
    height: 300px; 
 
    margin: 1rem; 
 
    position: relative; 
 
    width: 290px; 
 
    overflow: hidden; 
 
    opacity: 1; 
 
} 
 

 
.card .topImage { 
 
    display: inline-flex; 
 
    width: 100%; 
 
    height: 220px; 
 
    overflow: hidden; 
 
    align-content: center; 
 
} 
 

 
.topImage { 
 
    background-color: rgba(0, 0, 0, .3); 
 
} 
 

 
.card .topImage img { 
 
    height: 220px; 
 
} 
 

 
.card .bottom { 
 
    height: 80px; 
 
    width: 100%; 
 
} 
 

 
.card .bottom p { 
 
    text-align: left; 
 
    height: 80px; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
    padding-left: 20px; 
 
    display: flex; 
 
    align-items: center; 
 
    text-decoration: none; 
 
    color: #444; 
 
    font-size: 18px; 
 
    font-family: Roboto, sans-serif; 
 
} 
 

 
.card-1 { 
 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
 
} 
 

 
.card-1:hover { 
 
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
 
    cursor: pointer; 
 
}
<div class="card card-1"> 
 
    <div class="topImage"> 
 
    </div> 
 
    <div class="bottom"> 
 
    <p>Project 1</p> 
 
    </div> 
 
</div> 
 

 
<div class="card card-1"> 
 
    <div class="topImage"> 
 
    </div> 
 
    <div class="bottom"> 
 
    <p>Project 2</p> 
 
    </div> 
 
</div> 
 

 
<div class="card card-1"> 
 
    <div class="topImage"> 
 
    </div> 
 
    <div class="bottom"> 
 
    <p>Project 3</p> 
 
    </div> 
 
</div>

來源

2017-04-04 Optic Lukie

+1

給'的text-align：center'所有'.card'的母公司。 – Alex

回答

2

使用Flexbox的，這是很容易。包含您的div只需添加display: flex;和justify-content: center;元素：

.card { 
 
    background: #fff; 
 
    border-radius: 3px; 
 
    display: inline-block; 
 
    height: 300px; 
 
    margin: 1rem; 
 
    position: relative; 
 
    width: 290px; 
 
    overflow: hidden; 
 
    opacity: 1; 
 
} 
 

 
.card .topImage { 
 
    display: inline-flex; 
 
    width: 100%; 
 
    height: 220px; 
 
    overflow: hidden; 
 
    align-content: center; 
 
} 
 

 
.topImage { 
 
    background-color: rgba(0, 0, 0, .3); 
 
} 
 

 
.card .topImage img { 
 
    height: 220px; 
 
} 
 

 
.card .bottom { 
 
    height: 80px; 
 
    width: 100%; 
 
} 
 

 
.card .bottom p { 
 
    text-align: left; 
 
    height: 80px; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
    padding-left: 20px; 
 
    display: flex; 
 
    align-items: center; 
 
    text-decoration: none; 
 
    color: #444; 
 
    font-size: 18px; 
 
    font-family: Roboto, sans-serif; 
 
} 
 

 
.card-1 { 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 
 
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1); 
 
} 
 

 
.card-1:hover { 
 
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); 
 
    cursor: pointer; 
 
} 
 

 
body { 
 
    display: flex; 
 
    justify-content: center; 
 
}
<div class="card card-1"> 
 
    <div class="topImage"> 
 
    </div> 
 
    <div class="bottom"> 
 
    <p>Project 1</p> 
 
    </div> 
 
</div> 
 

 
<div class="card card-1"> 
 
    <div class="topImage"> 
 
    </div> 
 
    <div class="bottom"> 
 
    <p>Project 2</p> 
 
    </div> 
 
</div> 
 

 
<div class="card card-1"> 
 
    <div class="topImage"> 
 
    </div> 
 
    <div class="bottom"> 
 
    <p>Project 3</p> 
 
    </div> 
 
</div>

來源

2017-04-04 19:37:27 j08691

1

與text-align: center

.card { 
 
    background: #fff; 
 
    border-radius: 3px; 
 
    display: inline-block; 
 
    height: 300px; 
 
    margin: 1rem; 
 
    position: relative; 
 
    width: 290px; 
 
    overflow: hidden; 
 
    opacity: 1; 
 
} 
 

 
.card .topImage { 
 
    display: inline-flex; 
 
    width: 100%; 
 
    height: 220px; 
 
    overflow: hidden; 
 
    align-content: center; 
 
} 
 

 
.topImage { 
 
    background-color: rgba(0, 0, 0, .3); 
 
} 
 

 
.card .topImage img { 
 
    height: 220px; 
 
} 
 

 
.card .bottom { 
 
    height: 80px; 
 
    width: 100%; 
 
} 
 

 
.card .bottom p { 
 
    text-align: left; 
 
    height: 80px; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
    padding-left: 20px; 
 
    display: flex; 
 
    align-items: center; 
 
    text-decoration: none; 
 
    color: #444; 
 
    font-size: 18px; 
 
    font-family: Roboto, sans-serif; 
 
} 
 

 
.card-1 { 
 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
 
} 
 

 
.card-1:hover { 
 
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
 
    cursor: pointer; 
 
} 
 
.parent { 
 
    text-align: center; 
 
}
<div class="parent"> 
 
    <div class="card card-1"> 
 
    <div class="topImage"> 
 
    </div> 
 
    <div class="bottom"> 
 
     <p>Project 1</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="card card-1"> 
 
    <div class="topImage"> 
 
    </div> 
 
    <div class="bottom"> 
 
     <p>Project 2</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="card card-1"> 
 
    <div class="topImage"> 
 
    </div> 
 
    <div class="bottom"> 
 
     <p>Project 3</p> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-04 19:37:46

2

只需使用Flexbox將創建一個父。爲卡片製作容器並放置顯示器：flex;它，然後辯解內容：中心到中心的他們不管新的div容器的大小

.card { 
 
     background: #fff; 
 
     border-radius: 3px; 
 
     display: inline-block; 
 
     height: 300px; 
 
     margin: 1rem; 
 
     position: relative; 
 
     width: 290px; 
 
     overflow: hidden; 
 
     opacity: 1; 
 
    } 
 

 
    .card .topImage { 
 
     display: inline-flex; 
 
     width: 100%; 
 
     height: 220px; 
 
     overflow: hidden; 
 
     align-content: center; 
 
    } 
 

 
    .topImage { 
 
     background-color: rgba(0, 0, 0, .3); 
 
    } 
 

 
    .card .topImage img { 
 
     height: 220px; 
 
    } 
 

 
    .card .bottom { 
 
     height: 80px; 
 
     width: 100%; 
 
    } 
 

 
    .card .bottom p { 
 
     text-align: left; 
 
     height: 80px; 
 
     width: 100%; 
 
     box-sizing: border-box; 
 
     margin: 0; 
 
     padding: 0; 
 
     padding-left: 20px; 
 
     display: flex; 
 
     align-items: center; 
 
     text-decoration: none; 
 
     color: #444; 
 
     font-size: 18px; 
 
     font-family: Roboto, sans-serif; 
 
    } 
 

 
    .card-1 { 
 
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
 
     transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
 
    } 
 

 
    .card-1:hover { 
 
     box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
 
     cursor: pointer; 
 
    } 
 

 
    .card-container { 
 
     display: flex; 
 
     justify-content: center; 
 
    }
<div class="card-container"> 
 

 
    <div class="card card-1"> 
 
     <div class="topImage"> 
 
     </div> 
 
     <div class="bottom"> 
 
     <p>Project 1</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="card card-1"> 
 
     <div class="topImage"> 
 
     </div> 
 
     <div class="bottom"> 
 
     <p>Project 2</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="card card-1"> 
 
     <div class="topImage"> 
 
     </div> 
 
     <div class="bottom"> 
 
     <p>Project 3</p> 
 
     </div> 
 
    </div> 
 

 
</div>

來源

2017-04-04 19:38:27 StefanBob

+1

這工作！非常感謝：D –

+0

非常歡迎。 Flexbox爲這類位置問題提供了可能性。肯定閱讀更多，如果你不熟悉：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – StefanBob

0

使用translateX和left規則來放置它們。

.card { 
 
    background: #fff; 
 
    border-radius: 3px; 
 
    display: inline-block; 
 
    height: 300px; 
 
    margin: 1rem; 
 
    position: relative; 
 
    width: 290px; 
 
    overflow: hidden; 
 
    opacity: 1; 
 
    left: 50%; 
 
    -webkit-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
} 
 

 
.card .topImage { 
 
    display: inline-flex; 
 
    width: 100%; 
 
    height: 220px; 
 
    overflow: hidden; 
 
    align-content: center; 
 
} 
 

 
.topImage { 
 
    background-color: rgba(0, 0, 0, .3); 
 
} 
 

 
.card .topImage img { 
 
    height: 220px; 
 
} 
 

 
.card .bottom { 
 
    height: 80px; 
 
    width: 100%; 
 
} 
 

 
.card .bottom p { 
 
    text-align: left; 
 
    height: 80px; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
    padding-left: 20px; 
 
    display: flex; 
 
    align-items: center; 
 
    text-decoration: none; 
 
    color: #444; 
 
    font-size: 18px; 
 
    font-family: Roboto, sans-serif; 
 
} 
 

 
.card-1 { 
 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
 
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); 
 
} 
 

 
.card-1:hover { 
 
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); 
 
    cursor: pointer; 
 
}
<div class="card card-1"> 
 
    <div class="topImage"> 
 
    </div> 
 
    <div class="bottom"> 
 
    <p>Project 1</p> 
 
    </div> 
 
</div> 
 

 
<div class="card card-1"> 
 
    <div class="topImage"> 
 
    </div> 
 
    <div class="bottom"> 
 
    <p>Project 2</p> 
 
    </div> 
 
</div> 
 

 
<div class="card card-1"> 
 
    <div class="topImage"> 
 
    </div> 
 
    <div class="bottom"> 
 
    <p>Project 3</p> 
 
    </div> 
 
</div>

來源

2017-04-04 19:48:16 CiprianD

相關問題

 相關問題