對齊文本和圖標字體圖標跨度中心的父div

我試圖對齊div容器內的<span>標記中的一些文本。文本應該位於容器的垂直中心，並且距離左邊界幾個像素。到左邊的距離沒有什麼大不了的，但我怎麼能把我的文本放在他父母的容器的垂直中心？對齊文本和圖標字體圖標跨度中心的父div

.container{ 
    border: 1px solid red; 
    height: 50px; 
    width: 100px; 
    } 

.container-content{ 
    height: 40px; 
    border: none; 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    margin-top: 5px; 
    margin-left: 3px; 
    margin-right: 3px; 
    } 

.container-content span{ 
    margin-left: 2px; 

    }

<div class="container"> 
    <div class="container-content"> 
    <span>Text<span> 
    </div> 
</div>

編輯

所有參考答案與文本偉大的工作，但如果我用一個圖標，字體圖標isn't放置在中心。如何解決這個問題與谷歌材質圖標字體？

.container { 
 
    border: 1px solid red; 
 
    height: 50px; 
 
    width: 100px; 
 
} 
 
.container-content { 
 
    height: 40px; 
 
    border: none; 
 
    border-left: 1px solid black; 
 
    border-right: 1px solid black; 
 
    margin-top: 5px; 
 
    margin-left: 3px; 
 
    margin-right: 3px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.container-content span { 
 
    margin-left: 5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="container-content"> 
 
     <span><span><i class="material-icons">check_circle</i><span> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

來源

2016-03-02 JohnDizzle

只需添加display: flex;和到.container-content會讓你的文字垂直居中內部容器。

如果你想增加從左邊的變化利潤率在下面的CSS：

.container-content span { 
    margin-left: 5px; 
}

Fiddle

編輯：

剛剛從圖標別人刪除line-height每一件事情是好。這是顯示中心。

.container { 
 
    border: 1px solid red; 
 
    height: 50px; 
 
    width: 100px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.container-content { 
 
    height: 40px; 
 
    border: none; 
 
    border-left: 1px solid black; 
 
    border-right: 1px solid black; 
 
    margin-left: 3px; 
 
    margin-right: 3px; 
 
    display: flex; 
 
    align-items: center; 
 
    width:100%; 
 
} 
 
.container-content span { 
 
    margin-left: 5px; 
 
} 
 

 
.material-icons{ 
 
    line-height:unset !important; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="container-content"> 
 
     <span><span><i class="material-icons">check_circle</i><span> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

來源

2016-03-02 09:33:09 ketan

你的答案幫了我很多，但現在我有一個圖標字體的問題。你是否也知道這個問題的解決方案？請看我的編輯 – JohnDizzle

@JohnDizzle好的。讓我檢查 – ketan

但它真的是中心嗎？我認爲它有點超過中心。有沒有一種方法可以通過填充或其他方式垂直移動圖標以滿足我的tic ;-) – JohnDizzle

與此添加line-height: 40px;到.container-content（如果跨度具有多行，這是沒有用的。）

.container-content{ 
    line-height: 40px; 
    border: none; 
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    margin-top: 5px; 
    margin-left: 3px; 
    margin-right: 3px; 
    }

Demo

來源

2016-03-02 09:34:04 Sowmya

檢查下面的代碼它可以幫你。

.container{ 
 
    border: 1px solid red; 
 
    height: 50px; 
 
    width: 100px; 
 
    } 
 

 
.container-content{ 
 
    height: 40px; 
 
    border: none; 
 
    border-left: 1px solid black; 
 
    border-right: 1px solid black; 
 
    margin-top: 5px; 
 
    margin-left: 3px; 
 
    margin-right: 3px; 
 
    align-items: center; 
 
    display: flex; 
 
    } 
 

 
.container-content span{ 
 
    margin-left: 2px; 
 

 
    }

<div class="container"> 
 
    <div class="container-content"> 
 
    <span>Text</span> 
 
    </div> 
 
</div>

來源

2016-03-02 09:41:40

我看到經由顯示器2種容易選擇：

.container { 
 
    height:50px; 
 
    width:100px; 
 
    box-sizing:border-box; 
 
    border:solid; 
 
    display:flex; 
 
    padding:5px 3px; 
 
    } 
 
.container-content { 
 
    margin:auto ; 
 
    text-align:center; 
 
    width:100%; 
 
    padding:0 2px; 
 
    border-left: 1px solid black; 
 
    border-right: 1px solid black; 
 
    }

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<div class="container"> 
 
    <div class="container-content"> 
 
    <span><span><i class="material-icons">check_circle</i></span> </span> 
 
    </div> 
 
</div>

或

.container { 
 
    height: 50px; 
 
    width: 200px; 
 
    border: solid; 
 
    display: table; 
 
    border-spacing: 3px 5px; 
 
} 
 
.container-content { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    border-left: 1px solid black; 
 
    border-right: 1px solid black; 
 
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<div class="container"> 
 
    <div class="container-content"> 
 
    <span><span><i class="material-icons">check_circle</i></span> </span> 
 
    </div> 
 
</div>

來源

2016-03-02 09:45:17

對齊文本和圖標字體圖標跨度中心的父div

回答

相關問題