Каков наилучший способ выровнять два встроенных элемента span влево и вправо без поплавка?

Question

<div class="recentactivitycontent" > 
    <span class="myh4 grey pull-left"><img src="images/exampleuser.png" alt="user"/> Admin added one new member.</span>  

    <span class="myh4 pull-right"><img src="images/clock.png" alt="clock"/> 3 min ago</span>  
    </div> 

Вот CSS

.recentactivitycontent span{ 
    display: inline-block; 
    line-height: 60px; 
    vertical-align: middle; 

} 

Как вы можете видеть на изображении здесь является родительским DIV с двумя пролетами элементов inside.When с использованием флоат свойства, проблема заключается в том, что они не будут оставаться вертикально.

Я хочу использовать способ, похожий на свойство text-align, чтобы точно выровнять встроенные элементы.Height = строка-высота с отображением: встроенный блок возможен, но тогда мне нужно установить свойство height каждый раз, когда я не хочу ,

Любое предложение приветствуется ..

Answer 1

Попробуйте CSS через Flexbox

.recentactivitycontent { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 

.recentactivitycontent .pull-left { 
    display: flex; 
    align-items: center; 
} 

Answer 2

Как Ryans Ответ на этот один:

.left, .right{ 
    position: absolute 
} 

.left:{ 
    left: 0 
} 

.right{ 
    right: 0 
} 

Но вы должны учитывать, чтобы поместить их в родительском с position из relative, fixed или absolute.

Абсолютные позиционированные элементы в родительском элементе с указанными позициями могут перемещаться вместе с родителем, если вы хотите, чтобы они находились в определенной позиции на вашей странице, тогда как абсолютные позиционируемые элементы в контейнере без атрибута позиции атрибута всегда будут перекрывать другие элементы и иметь позицию относительно вашего окна браузера.

Answer 3

Вы можете использовать Flexbox

Ваш контейнер должен дисплей: сгибать; align-items: center;

Тогда ваши дети охватывают потребности, чтобы выровнять себя с помощью Левое поле: авто (это будет выровнен вправо)

Или Маржа-направо: авто - это будет выровнен влево

Answer 4

Так вы спросил способ, используя text-align, есть свойство text-align-last, которое выравнивает элементы до дальнего конца, когда его значение равно justify.

.main{ 
 
    text-align-last: justify; 
 
} 
 

 
.child{ 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div class="main"> 
 
    <div class="child">hello</div> 
 
    <div class="child">hey</div> 
 
</div>

Но, это не имеет большого поддержки браузера еще.

Answer 5

Вы можете использовать эти css для выравнивания изображений, а также всего содержимого для перемещения туда, где вы хотите.

Позиция: абсолютная делает ваш контент в фиксированном положении, так что вы можете легко перемещать внутренний div по своему желанию.

.myh4{ 
    position:absolute; 
} 
.pull-left{ 
    left:0; 
} 
.pull-right{ 
    right:0; 
}