如何居中对齐跨度后跟div中的div(How to center align a span followed by a div in a div)
我有以下代码,我想在父div中居中对齐span和div。 我怎样才能实现它? 如果我给出左侧和绝对位置,则在平板电脑上对齐会发生变化,需要进行媒体查询。 没有它,有什么办法可以解决它吗?
<div> <span data-toggle="toggle"> <input class="button" data-on="On" data-off="Off" type="checkbox"> <div class="toggle-group"> <label class="btn btn-primary toggle-on"> On </label> <label class="btn btn-default toggle-off active"> Off </label> <span class="toggle-handle btn btn-default"></span> </div> </div> </div>I have the following code and I want to center align span and div inside parent div. How can i achieve it? If I give left and absolute position, on tablets the alignment changes and need to go for media query. Without that, is there any way I can fix it?
<div> <span data-toggle="toggle"> <input class="button" data-on="On" data-off="Off" type="checkbox"> <div class="toggle-group"> <label class="btn btn-primary toggle-on"> On </label> <label class="btn btn-default toggle-off active"> Off </label> <span class="toggle-handle btn btn-default"></span> </div> </div> </div>最满意答案
使用text-align: center
.wrapper > span{display:block; text-align:center} .wrapper > div{text-align:center} .wrapper > div > div{display: inline-block}演示更新
以单行为单位获得子跨度和div
.wrapper{text-align:center} .wrapper div{display:inline-block}演示2
Use text-align: center
.wrapper > span{display:block; text-align:center} .wrapper > div{text-align:center} .wrapper > div > div{display: inline-block}Demo updated
To get child span and div in single line
.wrapper{text-align:center} .wrapper div{display:inline-block}Demo 2
更多推荐
发布评论