html – 在第三个容器div内水平对齐2个div

栏目: Html · 发布时间: 5年前

内容简介:翻译自:https://stackoverflow.com/questions/11764905/align-2-divs-horizontally-inside-a-third-container-div

我有以下代码:

<div id="container">
    <div id="div1">Div 1</div>
    <div id="div2">Div 2</div>
</div>

我希望能够将#box1和#box2放在容器内的另一个旁边.容器居中

这将使容器居中,并使其中的两个div居中,同时将样式与实际内容分开:

HTML:

<div id="container">
    <div>Div 1</div>
    <div>Div 2</div>
</div>

CSS:

#container > div
{
    display: inline-block;
    border: solid 1px #000;
}
#container
{
    border: solid 1px #ff0000;
    text-align: center;
    margin: 0px auto;
    width: 40%;
}

工作范例:

http://jsfiddle.net/JLjjK/

2017年更新:

Flexbox正变得越来越普遍.以下是使用Flexbox实现类似结果的方法:

HTML:

<div class="outer">
  <div>1</div>
  <div>2</div>
</div>

CSS:

.outer {
  border: 1px solid #000;
  display:flex;
  justify-content: center;
  padding: 3px;
}
.outer > div {
  border: 1px solid #000;
  margin:2px;
}

示例: https://jsfiddle.net/pb61a1cj/1/

翻译自:https://stackoverflow.com/questions/11764905/align-2-divs-horizontally-inside-a-third-container-div


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

High-Performance Compilers for Parallel Computing

High-Performance Compilers for Parallel Computing

Michael Wolfe / Addison-Wesley / 1995-6-16 / USD 117.40

By the author of the classic 1989 monograph, Optimizing Supercompilers for Supercomputers, this book covers the knowledge and skills necessary to build a competitive, advanced compiler for parallel or......一起来看看 《High-Performance Compilers for Parallel Computing》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具