Выравнивание элементов div в центре и справа

У меня есть четыре вкладки, разработанные с помощью HTML5/CSS3/JS, показанных ниже.Выравнивание элементов div в центре и справа

Я использовал display:inline-block; для вкладки дивы и text-align:center для их родительского DIV, чтобы найти все четыре вкладки в центре страницы.

<div class='parent'> 
    <div class='tabItem'>YOU</div> 
    <div class='tabItem'>DATABASE</div> 
    <div class='tabItem'>TASKS</div> 
    <div class='tabItem'>HELP</div> 
</div>

CSS3:

.parent{text-align:center;} 
.tabItem{display:inline-block;}

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

Предпочтительно, чтобы элементы div соответствовали естественному потоку страницы.

источник

2017-02-22 user3405291

Просьба [Minimal, полный и проверяемый пример] (http://stackoverflow.com/help/mcve) вашу попытки, например, как [фрагмент стека] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/), а не только некоторые фрагменты кода ... – andreas

Смотрите скрипку https://jsfiddle.net/cz1tn1zm/ –

с '.parent {text-align: center;}' все ваши дочерние div будут центрированы. Вы хотите, чтобы «ВЫ» и «ПОМОЩЬ» были выровнены справа? Пожалуйста, дайте четкое описание того, что вы хотите – kampangala

вот ваше решение!

.parent{text-align:center;} 
 
.tabItem{display:inline-block;} 
 
.right { 
 
float: right; 
 
}

<div class='parent center'> 
 
    <div class='tabItem'>DATABASE</div> 
 
    <div class='tabItem'>TASKS</div> 
 
     <div class='parent right'> 
 
     <div class='tabItem'>YOU</div> 
 
     <div class='tabItem'>HELP</div> 
 
     </div> 
 
</div>

источник

2017-02-22 08:52:50 MKAD

Надеется, что это помогает !!

<html> 
    <head> 
    <style> 
     .parent{text-align:center;} 
     .tabItem{display:inline-block;} 
     #right {float: right;} 
    </style> 
    </head> 
    <body> 
    <div class='parent'> 
     <div class='tabItem'>DATABASE</div> 
     <div class='tabItem'>TASKS</div> 
     <div id="right" class='tabItem'>YOU</div> 
     <div id="right" class='tabItem'>HELP</div> 
    </div> 
    </body> 
</html>

Или просто поместите эти два div в родительский контейнер и дайте ему id = "right", чтобы избежать повторения идентификатора!

источник

2017-02-22 08:56:19

ли что-то вроде этого

.parent{text-align:center;} 
 
.tabItem{display:inline-block;} 
 
.right{float:right;} 
 
.left{float:left;}

<div class='parent'> 
 
    <div class='tabItem left'>Content for Left</div> 
 
    <div class='tabItem'>DATABASE</div> 
 
    <div class='tabItem'>TASKS</div> 
 
    <div class='tabItem right'>YOU</div> 
 
    <div class='tabItem right'>HELP</div> 
 
</div>

источник

2017-02-22 08:59:07

Я думаю, вам нужно будет установить вкладки, нужно переместить к абсолютному положению, так что они будут вне нормального содержания потока, то вы можете по-настоящему центрировать две другие вкладки.

.parent { 
 
    background: pink; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.tabItem { 
 
    margin: 0 5px; 
 
    display: inline-block; 
 
    background: aqua; 
 
} 
 
.tabItem:nth-child(1) { 
 
    position: absolute; 
 
    right: 50px; /* width of "HELP" tab */ 
 
} 
 
.tabItem:nth-child(4) { 
 
    position: absolute; 
 
    right: 0; 
 
}

<div class='parent'> 
 
    <div class='tabItem'>YOU</div> 
 
    <div class='tabItem'>DATABASE</div> 
 
    <div class='tabItem'>TASKS</div> 
 
    <div class='tabItem'>HELP</div> 
 
</div>

источник

2017-02-22 20:34:01 Stickers

CSS3 функция display:flex вариант тоже. Можете поиграть с ним, чтобы посмотреть, будет ли это работать.

.parent{ 
 
    display:flex; 
 
    justify-content:center; 
 
} 
 

 
.item{ 
 
    padding: 10px; 
 
    text-transform:uppercase; 
 
} 
 

 
.right{ 
 
    margin-left:auto; 
 
} 
 

 
.left{ 
 
    margin-right:auto; 
 
}

<div class="parent"> 
 
    <div class="item left">you</div> 
 
    <div class="item">database</div> 
 
    <div class="item">tasks</div> 
 
    <div class="item right">help</div> 
 
</div>

источник

2017-02-27 07:25:02 user3405291

Выравнивание элементов div в центре и справа

ответ

Смежные вопросы