水平對齊表格內的表格單元格

如何水平對齊此表格單元格內的文本？它看起來像是在向右移動，我不知道爲什麼。 https://jsfiddle.net/o06e11o9/水平對齊表格內的表格單元格

HTML

<div class="affil2"> 
    <div class="oval2"></div> 
    <div class="contents"> 
    a lorem ipsum dolor sit amet. Donec facilisis tortor ut augue lacinia, at viverra est semper. Sed sapien metus, tempor a tortor. 
    <br /> 
    <br /> Pellentesque non dignissim neque. Ut porta viverra est, ut dignissim elit elementum ut. 
    </div> 
</div>

CSS

.affil2 { 
    align-content: center; 
    display: table; 
    text-align: center; 
    z-index: 20; 
    border: 1px solid #705A1D; 
    position: relative; 
    height: 200px; 
    width: 960px; 
    background-color: #af9254; 
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, .35); 
} 

.contents { 
    margin: 0 auto; 
    text-align: left; 
    width: 600px; 
    display: table-cell; 
    vertical-align: middle; 
    color: #fff; 
    font-size: 18px; 
} 

.oval2 { 
    z-index: 1; 
    position: absolute; 
    top: -110px; 
    width: 1200px; 
    height: 250px; 
    border-radius: 100%; 
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.3) 0%, rgba(255, 0, 0, 0) 100%); 
}

來源

2017-06-07 HFHaunter

有在你的代碼中的許多奇怪的事情，但你的解決方案，您可以更改：

width: 100%;和類contents

.contents { 
    margin: 0 auto; 
    text-align: center; 
    width: 100%; 
    display: table-cell; 
    vertical-align: middle; 
    color: #fff; 
    font-size: 18px; 
}

JsFiddle Link

來源

2017-06-07 01:32:18

我嘗試了一堆的解決方案，可能是一些「怪東西」的結果，但大多是我剛不知道我在做什麼。 – HFHaunter

我想保留我的文本段落形式，這就是爲什麼我在600px寬度。我應該在內容中製作一個小孩div嗎？然後把文本放在裏面？ – HFHaunter

啊。通過在左側和右側相等的填充來固定它。感謝您的幫助！ – HFHaunter

CSS

.contents { 
    padding-left: 200px;//hfhaunter 
    padding-right: 200px;//hfhaunter 
    margin: 0 auto; 
    text-align: center; 
    width: 100%;//thank you pablo cesar cordova morales 
    display: table-cell; 
    vertical-align: middle; 
    color: #fff; 
    font-size: 18px; 
}

來源

2017-06-07 01:43:57 HFHaunter

水平對齊表格內的表格單元格

回答

相關問題