html - 关于如何将黑色外部 div 的元素居中的任何想法?并使它们在尺寸上有反应?

标签 html css

下面的代码由一个标签和一个文本框组成,我需要将它们置于整个黑色容器的中心,并且当窗口的大小发生变化时,它们仍然紧挨着彼此。非常感谢任何想法,谢谢

HTML:

 <div  style="position: relative; width: 100%; min-height: 68px; background-color: #000; border-top: 2px solid white; border-bottom: 2px solid white; overflow: hidden; padding-bottom: 2px" ng-switch on="isLoggedIn">
    <div style="position: relative; float: left; margin-left: 12px;">
            <div class="label" style="vertical-align: middle; color: #fff; margin-top: 8px;">Test</div>
        </div>

        <div style="position: relative; float: left;  margin-left: 12px;">
            <input type="number" class="theInput" min="1" />
            <label class="theLabel"><strong>&nbsp; $ </strong>  &nbsp;  |</label>
        </div>
        <div style="position: relative; float: left; margin-left: 12px;">
            <button type="submit"  ng-disabled="vm.isProcessing"></button>
        </div>
    </div>
</div>

最佳答案

在外部 div 上试试这个:

<div style="position: relative; left:50%; translate: -50%;">

相对位置应该移动到 div 的左侧,然后平移将调整到右侧以完美居中。

关于html - 关于如何将黑色外部 div 的元素居中的任何想法?并使它们在尺寸上有反应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33541167/

相关文章:

javascript - 如何选择动态添加的下拉列表的默认选项

html - 更改 Bootstrap 轮播的高度 - 保持响应

javascript - 我的 .js 文件不会链接到我的 HTML,无法让 scrollmagic 工作

html - 如何通过水平父 block 使图标居中?

javascript - 有没有办法获得位置 :absolute elements? 的继承宽度

html - 背景大小 :cover, 左边 1px 空白

javascript - 如何让我的导航栏在滚动时变成半透明?

javascript - 使用 php 中的单选按钮从 MS SQL SERVER 中删除行

html - 自定义字体显示在教程站点,但不是我的?

具有顺序输出的 unix shell 脚本中的 HTML