html - js居中 - 居中对齐
在Bootstrap 3中右对齐div (3)
在Bootstrap 3中是否有一种方法可以正确对齐div?
我知道偏移的可能性,但我想将格式化的div对齐到其容器的右侧,同时它应该在全宽移动视图中居中。 “拉右”这个班不再适用了。 他们忘了更换它还是我错过了一些明显的东西?
<div class="row">
<div class="container">
<div class="col-md-4">
left content
</div>
<div class="col-md-4 col-md-offset-4">
<!-- The next div has a background color and its own paddings and should be aligned right-->
<!-- It is now in the right column but aligned left in that column -->
<div class="yellow_background">right content</div>
</div>
</div>
</div>
Shure我知道如何在CSS中执行此操作,但它可以在纯bootstrap 3中完成吗?
你的意思是这样的:
HTML
<div class="row">
<div class="container">
<div class="col-md-4">
left content
</div>
<div class="col-md-4 col-md-offset-4">
<div class="yellow-background">
text
<div class="pull-right">right content</div>
</div>
</div>
</div>
</div>
CSS
.yellow-background {
background: blue;
}
.pull-right {
background: yellow;
}
可以在Codepen上找到完整的示例。
我认为你试图将内容与div中的右边对齐,带偏移的div已经将自己推向右边,这里有一些代码和LIVE示例 :
仅供参考: .pull-right
仅将div推向右侧,而不是div内的内容。
HTML:
<div class="row">
<div class="container">
<div class="col-md-4 someclass">
left content
</div>
<div class="col-md-4 col-md-offset-4 someclass">
<div class="yellow_background totheright">right content</div>
</div>
</div>
</div>
CSS:
.someclass{ /*this class for testing purpose only*/
border:1px solid blue;
line-height:2em;
}
.totheright{ /*this will align the text to the right*/
text-align:right;
}
.yellow_background{
background-color:yellow;
}
另一个修改:
...
<div class="yellow_background totheright">
<span>right content</span>
<br/>image also align-right<br/>
<img width="15%" src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
...
希望它能解决你的问题