如何对齐div内的span元素？

关于重复问题的更新：它不是相同的问题，因为我无法设置包含div的高度。如何对齐div内的span元素？

如何在div内水平和垂直对齐span元素。

该div是resposive元素，因此它可能需要几个大小。跨度并没有设置高度也不宽度

<div class="the-div"> 
    <span class="the-span" >span here</span> 
</div>

我尝试：

.the-span{top: 50%; text-align: center}

我不想用JS这一点。

捕获： enter image description here

来源

2015-05-08 JPashs

居中对齐，你是什么意思？ –

您是否尝试在div class'the-div'中添加'text-align：center'？ – Lee

是的，我需要中心的跨度里面，水平和垂直 – JPashs

你可以改变它的位置正是如此：

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
div, 
 
span { 
 
    width: 50%; 
 
    height: 50%; 
 
    border: 1px solid; 
 
    display: block; 
 
    position: relative; 
 
} 
 
span { 
 
    transform: translateY(-50%) translateX(-50%); /* <--offset top/left by half its own height/width */ 
 
    left: 50%; /* position half way within containing div */ 
 
    top: 50%; /* position half way within containing div */ 
 
}

<div> 
 
    <span> 
 
    </span> 
 
</div>

来源

2015-05-08 09:08:43 SW4

比我有更清洁标记:) – jbutler483

@ jbutler483但在生产中OP必须使用您发布的标记，因为这只适用于演示，而不适用于现实世界 –

我无法让它工作，我运行您的代码而不是工作...看我捕获我上传到问题。 – JPashs

如何对齐div内的span元素？

回答

相关问题