水平對齊嵌入塊

我有一個div元素，它具有嵌入塊顯示屬性。我想將它與下一個代碼水平對齊，但它不起作用。水平對齊嵌入塊

div { 
 
    display: inline-block; 
 
    border: 3px solid red; 
 
    margin: auto; 
 
}

<div> 
 
    <p>This is a random text</p> 
 
</div>

來源

2017-03-01 Cristi Cazan

對不起，我不確定我是否理解。更多的澄清，也許？ – scoopzilla

你想中心水平div？ – j08691

什麼是「下一個代碼」？ - 你應該把它添加到你的問題！ – Johannes

有幾個方法可以做到這一點。最快的方法是更換margin: auto;有：

margin-left: 50%; 
transform: translateX(-50%);

這將是推動50％的權利，相對於它的父，然後50％（相對於本身）的左側，所以它完全居中。

另一種方式，如果你願意完全改變CSS，與此更換所有的CSS：在

div { 
    text-align: center; 
} 
p { 
    border: 3px solid red; 
    padding: 15px 0; 
    display: inline-block; 
}

還幾乎所有移動代碼在div到p，然後將text-align: center;應用於父div，這意味着div中的每個元素都居中。

來源

2017-03-01 22:13:09

謝謝你的幫助！ –

另一個問題：你能解釋爲什麼margin：auto方法不起作用嗎？ –

@CristiCazan對於'margin：0 auto;'（不是'margin：auto;'）來說，元素需要爲它們定義一個特定的寬度。例如，'width：500px;'或'min-width：500px;'您將應用於'p'元素。設置特定的寬度對於響應速度並不是很好，除非您也願意爲它進行一些媒體查詢，所以這些其他選項更好。如[MDN頁面]（https://developer.mozilla.org/en/docs/Web/CSS/margin#Horizontal_centering_with_margin_0_auto）中提到的那樣，您也可以使用'display：flex; justify-content：center;'代替父'div'。 –

該做的伎倆：

:root { 
    text-align: center; 
}

:root { 
 
    text-align: center; 
 
} 
 

 
div { 
 
    display: inline-block; 
 
    border: 3px solid red; 
 
}

<div> 
 
    <p>This is a random text</p> 
 
</div>

來源

2017-03-01 20:42:53 pabvid

謝謝你的幫助！ –

水平對齊嵌入塊

回答

相關問題