html – 将span添加到center align element的一侧

概述我正在尝试在CSS中实现一些设计,但在确定如何对齐这个< span>时遇到一些麻烦.正确. 我正在尝试实现< input>和< button>元素集中对齐,但< span>元素绝对位于< input>的右侧,例如： 确保< span>非常重要.不影响其他元素的对齐. <输入>和< button>应该始终正好在父级的中间. 如果我只能在CSS中这样做会很棒.这是我到目前为止： div { p 我正在尝试在CSS中实现一些设计,但在确定如何对齐这个< span>时遇到一些麻烦.正确.

我正在尝试实现< input>和< button>元素集中对齐,但< span>元素绝对位于< input>的右侧,例如：

确保< span>非常重要.不影响其他元素的对齐. <输入>和< button>应该始终正好在父级的中间.

如果我只能在CSS中这样做会很棒.这是我到目前为止：

div {    position: relative;    text-align: center;    background: #B7B7B7;    wIDth: 400px;}input {    padding: 5px;    margin: 10px 0;    text-align: center;    Font-size: 1.2em;    wIDth: auto;}.verify {    display: block;    wIDth: 20px;    height: 20px;    background: red;    position: absolute;    top: 0; /* Not sure how to cal@R_419_6603@te these? */    right: 0; /* input.X + input.WIDth + 15px ?? */}

<div>    <input placeholder="Enter code" maxlength="8" size="8"/><br />    <span ></span>    <button>Register</button></div>

附加信息：

>它只需要在Chrome中运行
>如果需要,我可以将所有元素设置为固定宽度
>如果需要,我可以进行DOM更改
>我不想硬编码< span>的X / Y坐标…我可能想稍后更改输入/按钮尺寸

解决方法 将输入和跨度包含在div中,位置为：relative,display：inline

跨度.verify将完全定位,将输入元素保留在原始位置(居中对齐)

通过给出一个顶部：50％然后是margin-top：-10px(它的高度的一半),它将在它的父高度的中间.

.wrp {    position: relative;    text-align: center;    background: #B7B7B7;    wIDth: 400px;}.inpWrp {    display: inline;    position:relative;}input {    padding: 5px;    margin: 10px 0;    text-align: center;    Font-size: 1.2em;    wIDth: auto;}.verify {    display: block;    wIDth: 20px;    height: 20px;    background: red;    position: absolute;    margin-top: -10px;    top: 50%; /* Not sure how to cal@R_419_6603@te these? */    right: -20px; /* input.X + input.WIDth + 15px ?? */}

<div >    <div >     <input placeholder="Enter code" maxlength="8" size="8"/>     <span ></span>    </div>            <br />    <button>Register</button></div>

总结

以上是内存溢出为你收集整理的html – 将span添加到center align element的一侧全部内容，希望文章能够帮你解决html – 将span添加到center align element的一侧所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。