如何用CSS設置其他div的div中心？

例如我設計了一個邊框樣式的div，並且我設計了另一個div作爲中心，我如何將它設置爲較大div的中心？如何用CSS設置其他div的div中心？

.Profile_Photo_Border { 
 
    \t border: 3px solid #052d31; 
 
    \t height: 90px; 
 
    \t width: 90px; 
 
    \t border-radius: 3px; 
 
    } 
 
    .Profile_Photo { 
 
    \t background-color:#005e67; 
 
    \t height: 80px; 
 
    \t width: 80px; 
 
    \t border-radius: 3px; 
 
\t  alignment-adjust:middle; 
 
\t  text-align:center; 
 
    } 
 
\t

<div class="Profile_Photo_Border"> 
 
     <div class="Profile_Photo"></div> 
 
    </div>

來源

2015-07-20 MojtabaSh

添加下面的樣式display: flex;到parent div和

margin: 0 auto; 
align-self: center;

孩子div來對齊，居中水平以及垂直。

所以風格成爲：

.Profile_Photo_Border { 

    border: 3px solid #052d31; 
    height: 90px; 
    width: 90px; 
    border-radius: 3px; 
    display: flex; 
} 
.Profile_Photo { 
    background-color:#005e67; 
    height: 80px; 
    width: 80px; 
    border-radius: 3px; 
    alignment-adjust:middle; 
    text-align:center; 
    margin: 0 auto; 
    align-self: center; 
}

見琴：「https://jsfiddle.net/ukgnnp4k/」

見截圖：

enter image description here

來源

2015-07-20 07:36:39

謝謝你@Nikhil Batra它很有用，再次感謝 – MojtabaSh

GLad幫助你@MojtabaSh :) –

你應該注意到，這是使用flexbox和不兼容Internet Explorer 8或9，可能不是10. [（source ）]（http://caniuse.com/#feat=flexbox）如果你需要支持這些瀏覽器，它將不起作用。使用5px的 – GregL

試着改變你的CSS：

.Profile_Photo_Border { 
    border: 3px solid #052d31; 
    height: 90px; 
    width: 90px; 
    border-radius: 3px; 
    position: relative; 
} 

.Profile_Photo { 
    background-color: #005e67; 
    height: 80px; 
    width: 80px; 
    border-radius: 3px; 
    text-align:center; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -40px; 
    margin-top: -40px; 
}

這個鏈接也可能會有所幫助： https://css-tricks.com/centering-css-complete-guide/

來源

2015-07-20 07:27:24 tenderloin

謝謝您的回答，有沒有其他較大的div化妝格中心的任何方式，而不使用的寬度和高度。例如，你已經使用了高度的一半高度，反正其他人不使用高度？ – MojtabaSh

你的意思是你沒有爲（小）子元素指定高度和寬度？ – tenderloin

你的第二個div有10px的大小比第一個更小在高度和寬度。因此，集中中間一個添加邊距：5px;到第二個div，Profile_Photo。

來源

2015-07-20 07:35:52 Meera

顯然是一個簡單的解決方案。 :) – Ravimallya

如果外部div和內部div具有固定寬度，則可以使用css position來對齊內部元素。

請參閱下面的CSS。

.Profile_Photo_Border { 
 
    \t border: 3px solid #052d31; 
 
    \t height: 90px; 
 
    \t width: 90px; 
 
    \t border-radius: 3px; 
 
     position: relative; 
 
    } 
 
    .Profile_Photo { 
 
    \t background-color:#005e67; 
 
    \t height: 80px; 
 
    \t width: 80px; 
 
    \t border-radius: 3px; 
 
\t /* alignment-adjust:middle; No need to use this. */ 
 
\t  text-align:center; 
 
     position: absolute; 
 
     top: 5px; 
 
     left: 5px; 
 
    } 
 
\t

<div class="Profile_Photo_Border"> 
 
     <div class="Profile_Photo"></div> 
 
    </div>

來源

2015-07-20 07:36:18 Ravimallya

.Profile_Photo { 

    background-color:#005e67; 
    height: 80px; 
    width: 80px; 
    border-radius: 3px; 
    margin: 5px auto; 

}

來源

2015-07-20 07:37:55

爲您提供了頂部和底部邊距。並使用自動，通過指定左邊距和右邊距，自動將div設置爲父div的中心。 –

這裏的中心股利的另一種方式無論寬度和高度 - Codepen

.Profile_Photo_Border { 
    border: 3px solid #052d31; 
    height: 90px; 
    width: 90px; 
    border-radius: 3px; 
    position: relative; 
} 
.Profile_Photo { 
    background-color:#005e67; 
    height: 80px; 
    width: 80px; 
    border-radius: 3px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    margin: auto; 
}

而且從CSS技巧一guide爲中心的div。

另一個來自Flexbox上的CSS技巧guide這是另一種更好的方法。

希望這可能會幫助你更好地理解。

來源

2015-07-20 07:38:23

請在您的答案中包含相關代碼，不要鏈接到CodePen。爲什麼，請參閱[這篇文章]（http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers），以及[好回答FAQ]（http://stackoverflow.com/help/how-to-answer）。 – GregL

這裏是我的2美分，我使用的顯示：table.cell CSS樣式：

.Profile_Photo_Border { 
 
    border: 3px solid #052d31; 
 
    height: 150px; 
 
    width: 150px; 
 
    border-radius: 3px; 
 
    display: table-cell; /*added*/ 
 
    vertical-align: middle; /*added*/ 
 
} 
 

 
.Profile_Photo { 
 
    background-color: #005e67; 
 
    height: 80px; 
 
    width: 80px; 
 
    border-radius: 3px; 
 
    text-align: center; /*added*/ 
 
    margin: auto; /*added*/ 
 
}

來源

2015-07-20 07:41:25

您可以添加這個CSS。

.Profile_Photo_Border { 
     border: 3px solid #052d31; 
     height: 90px; 
     width: 90px; 
     border-radius: 3px; 
    } 
    .Profile_Photo { 
     background-color:#005e67; 
     height: 80%; 
     width: 80%; 
     border-radius: 3px; 
     text-align:center; 
     margin:10px auto; 
    }

使用此http://jsfiddle.net/18yao91v/244/

來源

2015-07-20 07:43:45 Steevan

如何用CSS設置其他div的div中心？

回答

相關問題