Question

CSS：

    body{
        width: 100%;
        color: black;
        margin: 0px 0px 0px 0px;
    }
    header .top-bar{
        width: 100%;
        background-color: #f2f2f2;
        height: 35px;
        border-top: 4px solid #1ce5d9;
        border-bottom: 1px solid #e7e7e7;
        vertical-align: middle;
        color: gray;
    }

    header .top-bar .top-bar-left{
        float: left;
    }

    header .top-bar .top-bar-right{
        float: right;
        vertical-align:top;
    }

    header .top-bar li{
        display: inline;
        text-decoration: none;
    }

    header .top-bar .active{
        text-decoration: none; 
        color: #1ce5d9;
        text-transform: uppercase;
        font-size: 140%;
    }

    header .top-bar .active:hover{
        text-decoration: none; 
        color: #1ce5d9;
        text-transform: uppercase;
    }

HTML：

            <header>
                <div class="top-line"></div>
                <div class="top-bar">
                    <div class="top-bar-left">
                        <ul>
                            <li><a href="#" class="active">TRENDING</a></li>
                            <li>Some Random Text</li>
                        </ul>
                    </div>

                    <div class="top-bar-right">
                        <input type="text" class="search-box">
                    </div>
                </div>
                <nav>
                    <div class="logo">
                        <img src="img/logo.png">
                    </div>

                    <div class="nav-bar">
                        <ul>
                            <li class="active"><a href="">Home</a></li>
                            <li><a href="">Features</a></li>
                            <li><a href="">Shop</a></li>
                            <li><a href="">Forums</a></li>
                        </ul>
                    </div>
                </nav>
            </header>

问题我希望文本和文本框水平位于div的中间。我已经厌倦了在谷歌上看，但我找不到有用的东西......

任何帮助将不胜感激！谢谢！

Answer 1

首先，text li标记位于另一个div内。因此，您无法将其与文本框一起居中。

所以将它们组合在同一个div中：

<div class="top-bar-right">
               <li>Some Random Text</li>
               <input type="text" class="search-box">
</div>

之后，如果您移除float: right中的top-bar-right，它将会对齐中心。

Answer 2

只需删除课程＆＃39; top-bar-left＆＃39;并为你的div添加一个宽度，将margin-left和margin-right添加到auto。

像这样：style =＆＃34; width：300px;保证金：10px auto;＆＃34;

居中文字＆amp;文本框

2 个答案: