div元素在中心和右边的对齐

我有四个使用下面显示的HTML5/CSS3/JS开发的选项卡。div元素在中心和右边的对齐

我已经使用display:inline-block;为标签的div和text-align:center为其父格在页面的中心，找到所有四个选项卡。

<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;}

现在我想找到两个选项卡，即你，帮助在页面的右侧，和标签，即数据库和任务的其余页面的中心。我想知道我该怎么做。

最好让div元素遵循页面的自然流动。

来源

2017-02-22 user3405291

请提供[最小，完整的，并且可验证示例]（http://stackoverflow.com/help/mcve）你的尝试的例如作为[Stack Snippet]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/），而不仅仅是一些代码片段... – andreas

请参阅小提琴https://jsfiddle.net/cz1tn1zm/ –

with'.parent {text-align：center;}'您的所有子div都将居中。你想让'YOU'和'HELP'在右边对齐吗？请给出清楚的描述你想要的东西 – 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”以避免重复ID！

来源

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元素在中心和右边的对齐

回答

相关问题