Css Can';t设法定位元素
我有一个Span标签,包含一个IMG标签和另一个Span标签。 我希望内部跨度标签左对齐,IMG标签中心对齐,我希望两个标签垂直对齐在中间,我似乎不能得到这个权利… 这就是它的外观(它是蓝色的,因为外部跨度标记用FireBug标记,以显示它正在拉伸整个曲面): 正如您在图像中看到的,两个标记都居中,并且它们也在容器顶部对齐,我不想要这两个 这是标记: 这是标记的当前CSS:Css Can';t设法定位元素,css,position,vertical-alignment,text-alignment,Css,Position,Vertical Alignment,Text Alignment,我有一个Span标签,包含一个IMG标签和另一个Span标签。 我希望内部跨度标签左对齐,IMG标签中心对齐,我希望两个标签垂直对齐在中间,我似乎不能得到这个权利… 这就是它的外观(它是蓝色的,因为外部跨度标记用FireBug标记,以显示它正在拉伸整个曲面): 正如您在图像中看到的,两个标记都居中,并且它们也在容器顶部对齐,我不想要这两个 这是标记: 这是标记的当前CSS: .v-button-wrap { height: 100%; display: block;
.v-button-wrap {
height: 100%;
display: block;
padding: 6px 15px 0 9px;
vertical-align: middle;
line-height: normal;
text-align: center;
}
.v-icon {
margin-left: auto;
margin-right: auto;
vertical-align: middle;
line-height: normal;
text-align: center;
}
.v-button-caption {
text-align: left;
line-height: normal;
vertical-align: middle;
}
我遗漏了与我的问题、颜色、字体规格等无关的CSS。不用说我不是CSS高手。我查阅了几个关于这个问题的指南,但我只找到了一些例子,其中div的全部内容都是以中心为中心的,这不是我想要的
有没有熟悉CSS的人看到了我代码中的问题?还是有别的办法来解决我的问题
谢谢
编辑:根据请求,这里是整个版面的屏幕截图。对不起,我必须模糊一些东西。。。但无论哪种情况,它们都不重要
EDIT2:我确实使用以下CSS解决了我的问题:
.v-button-details-panel-header .v-button-wrap {
height: 100%;
text-align: inherit;
padding: 0px;
}
.v-button-details-panel-header .v-button-wrap .v-button-caption {
display: table-cell;
position: relative;
text-align: left;
}
.v-button-details-panel-header .v-button-wrap .v-icon {
display: table-cell;
position: relative;
top: 12px;
margin-left: auto;
margin-right: auto;
}
我相信建议对静态布局是有好处的。但是,由于面板和水平拉伸按钮的移动取决于扩展和折叠,因此这不是一个合适的解决方案 您可能需要将img和span.v_按钮_标题的CSS
display
属性设置为inline block
另见本文:
至于实现所需结果的另一种技术:如果您知道容器元素的高度,并且知道要居中的元素的高度(不幸的是,从您发布的CSS来看,您似乎不知道),那么您可以
位置:绝对
top
属性设置为(containerHeight/2)-(centeredEltHeight/2)您可能需要将img和span.v_按钮_标题的CSS
display
属性设置为inline block
另见本文:
至于实现所需结果的另一种技术:如果您知道容器元素的高度,并且知道要居中的元素的高度(不幸的是,从您发布的CSS来看,您似乎不知道),那么您可以
位置:绝对
top
属性设置为(containerHeight/2)-(centeredEltHeight/2)很难辨认出你贴的图片。也许一个你想要实现的截图会有所帮助,还有一个我们可以复制/粘贴的HTML片段。我可以发布一个截图。发布HTML将非常困难。。你看,我是在Vaadin(类似GWT的框架)中开发的,我实际上无法控制标记,它是从java代码生成的,我在FireBug中看到的标记非常难以使用。标签上的标签上的标签。。。。因此,我已经添加的小HTML片段几乎是我所能得到的全部。然而,这段文章应该是唯一影响我所指定位的东西。很难理解你发布的图片。也许一个你想要实现的截图会有所帮助,还有一个我们可以复制/粘贴的HTML片段。我可以发布一个截图。发布HTML将非常困难。。你看,我是在Vaadin(类似GWT的框架)中开发的,我实际上无法控制标记,它是从java代码生成的,我在FireBug中看到的标记非常难以使用。标签上的标签上的标签。。。。因此,我已经添加的小HTML片段几乎是我所能得到的全部。然而,这段文章应该是唯一影响我所指定位的东西。谢谢!我来看看这个。在我下班的路上,所以我不能马上测试它。。。我认识到理解垂直对齐,或“如何(不)垂直居中内容”,我在自己的研究中遇到过,我想我会再看一遍!但我会在星期一回来试试这篇好文章。那很有用,谢谢!我来看看这个。在我下班的路上,所以我不能马上测试它。。。我认识到理解垂直对齐,或“如何(不)垂直居中内容”,我在自己的研究中遇到过,我想我会再看一遍!但我会在星期一回来试试这篇好文章。那很有用。