我對html有問題。我想設置一個html行,並在該行我必須設置文本的div。這裏是例子,但它是一張照片。我想在html中得到這個。html line上的中心div
我希望有人能幫助我。
編輯:
我知道如何在HTML一條線,我知道如何得到這個黃格與文本。問題是。我如何得到黃線上的黃線。這是我目前的結果。
我對html有問題。我想設置一個html行,並在該行我必須設置文本的div。這裏是例子,但它是一張照片。我想在html中得到這個。html line上的中心div
我希望有人能幫助我。
編輯:
我知道如何在HTML一條線,我知道如何得到這個黃格與文本。問題是。我如何得到黃線上的黃線。這是我目前的結果。
您可以Flexbox
和僞元素做到這一點。這裏是Fiddle
.element {
display: flex;
align-items: center;
}
.price {
background: #FEC538;
font-size: 30px;
font-weight: bold;
padding: 10px 40px;
border-radius: 50px;
}
.element:before,
.element:after {
content: '';
flex: 5;
height: 3px;
background: #C3C3C3;
}
.element:after {
flex: 1;
}
<div class="element">
<div class="price">Save 35%</div>
</div>
感謝您的答覆。你能解釋一下:之前和之後:做什麼? –
這些是僞元素https://developer.mozilla.org/en/docs/Web/CSS/::before,在這種情況下,我用它們來創建線條。 –
這將做.. 的Html
<div class="center-div"></div>
**Css**
body
{
background-color: #fcfcfc;
}
.center-div
{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 3px;
}
集width
,並設置margin:auto;
。
div.c2 {
margin:auto;
width:80px;
text-align:center;
/*color*/
background-color: #FEC538;
border-radius: 10px;
}
<div>
<div class=c2>Save 35%</div>
<div>
這將做到這一點
<div class='c1'>
<span>save 35%</span>
</div>
.c1{
position:relative;
text-align:center;
}
.c1:before{
content:'';
height:2px;
width:100%;
background:#CDCCCD;
position:absolute;
top:50%;
left:0;
margin:-1px 0 0;
}
.c1 span{
display:inline-block;
padding:5px 15px;
background:#FEC538;
border-radius:20px;
position:relative;
}
分享您的代碼 – Atula
我會建議艾哈邁德·薩拉馬的答案,因爲Flex是在所有瀏覽器中都不兼容。 –
@MuhammadOmarElShourbagy你能告訴我哪些瀏覽器與Flex兼容,因爲它是一個移動應用程序。我在Safari上的Chrome上嘗試了它,並且兩個瀏覽器都兼容。 –