我想左对齐图像,居中对齐div中的文本。
但是我得到了:
文本“此未居中”未完全居中。
HTML如下:
<div id='heading'>
<div id='heading-inner-container'>
<img id='logo' src='abc.jpg'/>
<div id='title'>
This is not centered
</div>
</div>
</div>
和CSS:
#heading {
box-shadow: rgba(0, 0, 0, 0.075) 0px 0px 4px 0px;
box-sizing: border-box;
display: flex;
height: 72px;
width: 100%;
align-items: center;
border-bottom: 1px solid rgb(222, 226, 230);
margin: 0px 0px 16px;
padding: 16px 24px;
}
#heading-inner-container {
width:90%;
text-align: center;
margin: 0 auto;
}
#logo {
float: left;
height: 60px;
}
#title {
font-size: 3.5rem;
font-weight: 300;
line-height: 1.2;
font: normal normal 300 normal 36px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
我怎样才能使文本居中?
答案 0 :(得分:2)
尝试使用transform
规则:
CSS
#heading {
position: relative; // Add this
box-shadow: rgba(0, 0, 0, 0.075) 0px 0px 4px 0px;
box-sizing: border-box;
display: flex;
height: 72px;
width: 100%;
align-items: center;
border-bottom: 1px solid rgb(222, 226, 230);
margin: 0px 0px 16px;
padding: 16px 24px;
}
#title {
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
white-space: nowrap;
transform: translate(-50%,-50%);
font-size: 3.5rem;
font-weight: 300;
line-height: 1.2;
font: normal normal 300 normal 36px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
答案 1 :(得分:0)
您可以将DocumentClient.CreateDocumentQuery<T>
用于图像并制作position:absolute
text-align:center
#heading {
box-shadow: rgba(0, 0, 0, 0.075) 0px 0px 4px 0px;
box-sizing: border-box;
display: flex;
height: 72px;
width: 100%;
align-items: center;
border-bottom: 1px solid rgb(222, 226, 230);
margin: 0px 0px 16px;
padding: 16px 24px;
}
#heading-inner-container {
width: 90%;
text-align: center;
margin: 0 auto;
position: relative;
min-height: 60px;
}
#logo {
float: none;
height: 60px;
position: absolute;
left: 0;
top: 0;
}
#title {
font-size: 3.5rem;
font-weight: 300;
line-height: 1.2;
font: normal normal 300 normal 36px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}