內格中心按鈕，忽略了其他元素

我有以下幾點：內格中心按鈕，忽略了其他元素

div.div 
    p.paragraph 
    | about 3 lines of text... (dynamic) 
    button.button-i-want-to-center 
    | click_me

我希望它看起來像這樣：

___________________________ 
| Text.....................| 
| Text.....................| 
| Text.....................| 
|   ______   | 
|   |BUTTON|   | <--- Center of div: 
|       |  I want the button to ignore 
|       |  the text. 
|       | 
|       | 
___________________________

牢記的div大小動態。

我該如何做到這一點？我嘗試了flex，但沒有做到這一點。固定利潤率也不好。

來源

2016-12-24 csTroubled

1.'顯示：內聯塊;''2.餘量：auto' –

@csTroubled我在下面添加了一個答案，請檢查它 –

您應該在按鈕上的按鈕position:relative;上使用position:absolute;。看到這個例子：

div{ 
 
    position:relative; 
 
    height:180px; 
 
    background-color:green; 
 
    } 
 
    
 
button{ 
 
    position:absolute; 
 
    top:calc(50% - 15px); 
 
    left:calc(50% - 50px); 
 
    height:30px; 
 
    width:100px; 
 
}

<div> 
 
<p> 
 
    lines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of text 
 
</p> 
 
<button>Click me</button> 
 
</div>

來源

2016-12-24 05:12:29 ab29007

@csTroubled它解決了您的問題嗎？如果是，那麼你能否接受答案？ – ab29007

你可以試試這個：

外層div設置爲position: relative;

對於您可以設置中間的DIV，創建一個類如下css：

.center { 
    position: absolute; 
    margin: auto; 
    top: 0; bottom: 0; 
    left: 0; right: 0; 
}

來源

2016-12-24 05:13:20 bugscoder

wrapper{ 
display: flex; 
justify-content : center; 
}

或

wrapper{ 
position : relative; 
} 
.button{ 
position: absolute; 
top : 50%; 
left : 50%; 
}

來源

2016-12-24 05:13:51

您可以使用display: block & margin: 0 auto，如：

button { 
    display: block; 
    margin: 20px auto; 
    font-size: 20px; 
}

看一看下面的代碼片段：

button { 
 
    display: block; 
 
    margin: 20px auto; 
 
    font-size: 20px; 
 
}

<div class="content-holder"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, consectetur, saepe. Praesentium doloribus dolorum qui nisi rem veniam iure. Ducimus, harum, molestiae. Harum consequatur cum accusantium fugiat, reiciendis repudiandae iste! 
 
    <button>Button</button> 
 
</div>

希望這有助於！

來源

2016-12-24 05:16:42

可以使用CSS3 Flexbox的概念

html,body{ 
 
    height:100%; 
 
    width:100%; 
 
    } 
 
.wrapper { 
 
      display:flex; 
 
    justify-content:center; 
 
      width:100%; 
 
      height:100%; 
 
      background-image: url("https://i.stack.imgur.com/wwy2w.jpg"); 
 
      background-repeat:no-repeat; 
 
      background-size:cover; 
 
      
 
    } 
 

 
    .button { 
 
    position:absolute; 
 
     align-self:center; 
 
    } 
 
p{ 
 
    color:white; 
 
    }

<div class="wrapper"> 
 
    <p> other texts</p> 
 
     <button class="button">Button</button> 
 
    </div>

來源

2016-12-24 05:28:55

有很多方法可以做到這一點，但你完全可以做到這一點與text-align:center;或margin:0 auto; 看到的片段低於

html,body{ 
 
    height:100%; 
 
    width:100%; 
 
    background-image:url("https://th3rdculture.files.wordpress.com/2011/06/dark-forest-35836-240944.jpg"); 
 
    background-size:cover; 
 
    margin:0; 
 
} 
 
.wrapper { 
 
    float:left; 
 
    width:100%; 
 
    text-align:center; 
 
} 
 
p{ 
 
    color:#fff; 
 
} 
 
button { 
 
    display:block; 
 
    margin:0 auto; 
 
}

<body> 
 
<div class="wrapper"> 
 
    <p> some texts here </p> 
 
    <p> other texts here other texts here other texts here </p> 
 
    <button class="button">Button</button> 
 
</div> 
 
</body>

或所需的文本和左按鈕僅centerd使用text-align:left

html,body{ 
 
    height:100%; 
 
    width:100%; 
 
    background-image:url("https://th3rdculture.files.wordpress.com/2011/06/dark-forest-35836-240944.jpg"); 
 
    background-size:cover; 
 
    margin:0; 
 
} 
 
.wrapper { 
 
    float:left; 
 
    width:100%; 
 
    text-align:left; 
 
} 
 
p{ 
 
    color:#fff; 
 
} 
 
button { 
 
    display:block; 
 
    margin:0 auto; 
 
}

<body> 
 
<div class="wrapper"> 
 
    <p> some texts here </p> 
 
    <p> other texts here other texts here other texts here </p> 
 
    <button class="button">Button</button> 
 
</div> 
 
</body>

來源

2016-12-24 06:28:52

內格中心按鈕，忽略了其他元素

回答

相關問題