CSS - Float и вертикальная середина

0

В настоящее время я разрабатываю небольшой логин, и у меня есть небольшая проблема с CSS. У меня есть два входа: нажмите меня!

Все в порядке, за исключением того, что тексты "Username" и "Email" должны быть вертикально центрированы. Для этого я использую "vertical-align: middle;" имущество. Это работает нормально, но если я добавлю "float: right"; в текстовое поле, то браузер, похоже, игнорирует этот вертикальный выравнивание, и я думаю, что это из-за того, что маржа рушится в результате атрибута float на моем входе. Поэтому я прочитал, что я должен применить атрибут "clear" к следующему элементу. Я сделал это, но он не работал, возможно, из-за моей структуры HTML. Вот код моего CSS и HTML:

CSS:

.append {
    width: 80%;
    display: inline-block;
    vertical-align: middle;
    background-color: #1E2229;
    border-radius: 4px;
    padding-left: 6px;
    font-size: 12px;
    border: 1px #17191F solid;
}

.append input {
    display: inline-block;
    float: right;
    height: 13px;
    outline: 0;
    background-color: #1E2229;
    color: white;
    padding: 10px;
    border-left: 1px #17191F solid;
    border-right: none;
    border-bottom: none;
    border-top: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    width: 75%;
}

HTML:

<div class="append">
<input tabindex="0" style="margin-left: 5px;" placeholder="Your Username">
<span><i class="fa fa-user"></i> Username</span>
</div>

Надеюсь, у кого-то есть хорошая идея, которая может решить мою проблему.

Спасибо всем заранее :)

  • 1
    Плавающие элементы не могут быть выровнены по вертикали. Пожалуйста, используйте поиск по стеку, поскольку этот вопрос задавался много раз раньше.
Теги:
css-float
vertical-alignment

1 ответ

0
Лучший ответ

взгляните на эту статью: http://css-tricks.com/centering-in-the-unknown/ специально эту часть здесь:

.something-else-semantic {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

Хороший способ получить вертикальное выравнивание по середине - это изменить отображение на ячейку таблицы, однако это не сработает, если вы хотите его поплавать. Если вы хотите поплавать, я бы предложил просто обернуть все, что вы хотите, плавать в другом div с поплавком на нем.

РЕДАКТИРОВАТЬ

Я немного поиграл, добавьте это в свой css:

.append .vert-middle{
    display: table-cell;
    vertical-align: middle;
    height: 33px;
}

и окружайте свой ярлык div ".vert-middle":

<div class="append">
<input tabindex="0" style="margin-left: 5px;" placeholder="Your Username">
<div class='vert-middle'><span><i class="fa fa-user"></i> Username</span></div>
</div>
  • 0
    Большое спасибо! Это решило мою проблему.
  • 0
    здорово, рад, что смог помочь

Ещё вопросы

Сообщество Overcoder
Наверх
Меню