显示分隔线

Question

我试图把这个部门放在网站的中心。但它不起作用。知道我如何将分区放在中心吗？

.HTML：

<div id="first">
    <img id="image1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
    <img id="image2" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
    <img id="image3" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
    <img id="image4" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
    <img id="image5" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
    <img id="image6" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
    <img id="image7" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
    <img id="image8" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
    <img id="image9" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
    <img id="image10"src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
</div>

.CSS：

#first
{
    top:-215px;
    width: 50%;
    height: 220px;
}
#first img 
{
    height: 100px;
    width: 100px;
    float:left;
    margin-right: 5%;
}

JSFIDDLE：https://jsfiddle.net/trszrqfx/

Answer 1

我不知道

你想做什么，但我想你想把"分隔线"居中

#first
{
    width: 50%;
    height: 220px;
    margin:auto; //add this
}

https://jsfiddle.net/trszrqfx/2/

Answer 2

你的意思是这样？

#first
{
    width: 50%;
    height: 220px;
}
#first img 
{
    height: 100px;
    width: 100px;
    float:left;
    margin-right: 5%
    border-right: 1px solid #000;
    padding-right: 20px;
}