[英]Vertically aligning div inside div
I have this fiddle where I need to align the box with "wholebox" class vertically to the middle (or top, or bottom, it can be configured). 我有一个小提琴 ,需要在其中将“ wholebox”类的框垂直对齐到中间(或顶部或底部,可以对其进行配置)。 The problem is that I've been trying solutions all around internet and none worked, I imagine it's because the configuration I have and that some property is overriding other so the result I want is unobtainable.
问题是我一直在尝试围绕Internet的解决方案,但没有一个起作用,我想这是因为我拥有的配置,并且某些属性会覆盖其他属性,因此无法获得我想要的结果。 So I decided just to ask in my specific case.
所以我决定只问我的具体情况。
.daliBoxSortableContainer { width: 100%; height: 236px; min-height: 35px; text-align: center; line-height: 100%; box-sizing: border-box; position: relative; padding: 0px; border-color: rgb(255, 255, 255); border-width: 0px; border-style: solid; opacity: 1; background-color: red } .wholebox { display: inline-block; position: relative; width: 25%; height: auto; vertical-align: middle; touch-action: none; cursor: inherit; } .selectedBox { background-color: #fff6ec; border: 1px dashed black; color: #555; } .helpersResizable { border: 1px solid #777; background-color: white; z-index: 1; position: absolute; width: 15px; height: 15px; cursor: move; } .boxStyle { width: 100%; height: 100%; position: relative; word-wrap: break-word; overflow: visible; visibility: visible; padding: 0px; background-color: rgb(255, 255, 255); border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; opacity: 1; } .showOverlay { width: 100%; background: black; top: 0; bottom: 0; position: absolute; opacity: 0.4; }
<div class="daliBoxSortableContainer"> <div style="display: table; width: 100%; height: 100%;"> <div style="width: 100%; height: 100%; display: table-cell; vertical-align: top;"> <div style="width: 100%; height: 100%; position: relative;"> <div class="wholebox selectedBox"> <div id="resizableContainer" style="visibility: visible;"> <div style="position: absolute; top: -2px; left: -2px; width: 100%; height: 100%; box-sizing: content-box;"></div> <div> <div class="helpersResizable" style="left: -7.5px; top: -7.5px;"></div> <div class="helpersResizable" style="right: -7.5px; top: -7.5px;"></div> <div class="helpersResizable" style="left: -7.5px; bottom: -7.5px;"></div> <div class="helpersResizable" style="right: -7.5px; bottom: -7.5px;"></div> </div> </div> <div class="boxStyle"> <div style="width: 100%; height: 100%;"> <div style="width: 100%; margin: 0px; height: 100%;"> <img src="http://nemanjakovacevic.net/wp-content/uploads/2013/07/placeholder.png" style="width: 100%; height: 100%;"> </div> </div> </div> <div class="showOverlay" style="visibility: hidden;"></div> </div> </div> </div> </div> </div>
Also it's important to note that .wholebox
can have position:absolute
or relative, depending on configuration, when absolute, can be dragged around so top and left properties will change. 同样要注意的是,
.wholebox
可以具有position:absolute
或relative,具体取决于配置,当为绝对时,可以拖动它,因此top和left属性将发生变化。 Height can be auto or fixed, depending on configuration as well. 高度也可以是自动的或固定的,具体取决于配置。
#resizableContainer
and .showOverlay
divs can be ignored I think, but I included them just in case some of their properties is preventing the result I want from working 我认为
#resizableContainer
和.showOverlay
div可以忽略,但是我将它们包括在内是为了防止某些属性阻止我想要的结果
By the way, if anybody knows a good book about CSS and all it's compatibility issues among properties, it'd be pretty much appreciated. 顺便说一句,如果有人知道一本关于CSS的好书,以及有关属性之间的所有兼容性问题的书,将不胜感激。
Many thanks in advance. 提前谢谢了。
You have 2 options: 1. Use Javascript to change position of the div based on user's screen size. 您有2个选项:1.使用Javascript根据用户的屏幕尺寸更改div的位置。 2. With CSS You have to assign some value to the containers of the given div(absolute position is impossible this way).
2.使用CSS您必须为给定div的容器分配一些值(这种方式不可能使用绝对位置)。
https://jsfiddle.net/402n2w21/3/ https://jsfiddle.net/402n2w21/3/
Is this what are u trying to achieve? 这是您要达到的目标吗? If its that u just need to add
top: 30%
to your .whole-box
class in the CSS file. 如果是这样,您只需要在CSS文件中的
.whole-box
类中添加top: 30%
即可。
Play with top
on .wholebox
, 0% for top, 26% for center, 56% for bottom. 在
.wholebox
上播放top
, top
为0%,中心为26%,底部为56%。
.daliBoxSortableContainer { width: 100%; height: 236px; min-height: 35px; text-align: center; line-height: 100%; box-sizing: border-box; position: relative; padding: 0px; border-color: rgb(255, 255, 255); border-width: 0px; border-style: solid; opacity: 1; background-color: red } .wholebox { display: inline-block; position: relative; width: 25%; height: auto; vertical-align: middle; touch-action: none; cursor: inherit; /*top: 0%;*/ top: 26%; /*top: 56%;*/ } .selectedBox { background-color: #fff6ec; border: 1px dashed black; color: #555; } .helpersResizable { border: 1px solid #777; background-color: white; z-index: 1; position: absolute; width: 15px; height: 15px; cursor: move; } .boxStyle { width: 100%; height: 100%; position: relative; word-wrap: break-word; overflow: visible; visibility: visible; padding: 0px; background-color: rgb(255, 255, 255); border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; opacity: 1; } .showOverlay { width: 100%; background: black; top: 0; bottom: 0; position: absolute; opacity: 0.4; }
<div class="daliBoxSortableContainer" data-id="sc-1479897411897" id="sc-1479897411897"> <div style="display: table; width: 100%; height: 100%;"> <div style="width: 100%;height: 100%; display: table-cell; vertical-align: top;"> <div style="width: 100%; height: 100%; position: relative;"> <div class="wholebox dndsc-1479897411897 selectedBox" id="box-bo-1479897411907" style=""> <div style="visibility: visible;"> <div style="position: absolute; top: -2px; left: -2px; width: 100%; height: 100%; box-sizing: content-box;"></div> <div> <div class="helpersResizable" style="left: -7.5px; top: -7.5px;"></div> <div class="helpersResizable" style="right: -7.5px; top: -7.5px;"></div> <div class="helpersResizable" style="left: -7.5px; bottom: -7.5px;"></div> <div class="helpersResizable" style="right: -7.5px; bottom: -7.5px;"></div> </div> </div> <div class="boxStyle"> <div style="width: 100%; height: 100%;"> <div style="width: 100%; margin: 0px; height: 100%;"> <img src="http://nemanjakovacevic.net/wp-content/uploads/2013/07/placeholder.png" style="width: 100%; height: 100%;"> </div> </div> </div> <div class="showOverlay" style="visibility: hidden;"></div> </div> </div> </div> </div> </div>
as @Sotjin suggested, Flexbox was the way I was looking for. 正如@Sotjin所建议的那样,Flexbox是我一直在寻找的方式。
Thanks everyone! 感谢大家!
try this 尝试这个
css 的CSS
#container {
/* essential for alignment */
height:300px;
line-height:300px;
text-align:center;
/* decoration */
background:#eee;
}
#aligned-middle {
/* essential for alignment */
vertical-align:middle;
/* decoration */
background:#ccc;
/* perhaps, reapply inherited values, so your content is styled properly */
line-height:1.5;
text-align:left;
}
/* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */
#container .strut {
/* parent's height */
height:300px;
}
.inline-block {
display:inline-block;
/* for IE < 8, should be placed in separate stylesheet, via use of conditional comments */
*display:inline;
*zoom:1;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.