CSS 中心显示内联块? [英] CSS center display inline block?

查看：26
本文介绍了CSS 中心显示内联块?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在这里有一个工作代码:http://jsfiddle.net/WVm5d/(你可能需要使结果窗口更大以查看对齐中心效果)

问题

代码工作正常，但我不喜欢 display: table;.这是我可以使 wrap-class 居中对齐的唯一方法.我认为如果有一种方法可以使用 display: block; 或 display: inline-block; 会更好.是否可以通过其他方式解决对齐中心问题?

向容器添加一个固定的 with 对我来说不是一个选择.

如果将来 JS Fiddle 链接被破坏，我也会在这里粘贴我的代码:

body {背景:#bbb;}.裹 {背景:#aaa;边距:0 自动；显示:表；溢出:隐藏；}.侧边栏{宽度:200px；向左飘浮;背景:#eee;}.容器 {边距:0 自动；背景:#ddd;显示:块；向左飘浮;填充:5px；}.盒子 {背景:#eee;边框:1px 实心 #ccc；填充:10px；边距:5px；向左飘浮;}.box:nth-child(3n+1) {清除:左；}

<div class="sidebar">侧边栏
<div class="容器"><div class="box">高度1

<div class="box">高度 2 <br/>高度2

<div class="box">高度3高度3高度3

<div class="box">高度1

<div class="box">高度 2 <br/>高度2

<div class="box">高度3高度3高度3

<div class="sidebar">侧边栏

解决方案

接受的解决方案对我不起作用，因为我需要一个带有 display: inline-block 的子元素既可以水平也可以在 100% 宽度的父级内垂直居中.

我使用了 Flexbox 的 justify-content 和 align-items 属性，它们分别允许您将元素水平和垂直居中.通过在父元素上将两者都设置为 center，子元素(甚至多个元素！)将完美地位于中间.

这个解决方案不需要固定宽度，这对我来说是不合适的，因为我的按钮文本会改变.

这是一个 CodePen 演示 和下面的相关代码片段:

.parent {显示:弹性；对齐内容:居中；对齐项目:居中；}

<a class="child" href="#0">Button</a>

I have a working code here: http://jsfiddle.net/WVm5d/ (you might need to make the result window bigger to see the align center effect)

Question

The code works fine but I don't like to have display: table;. It's the only way I could make the wrap-class align center. I think it would be better if there was a way to use display: block; or display: inline-block;. Is it possible to solve the align center another way?

Adding a fixed with to the container is not an option for me.

I will also paste my code here if the JS Fiddle link gets broken in the future:

body {
    background: #bbb;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: table;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    float: left;
    background: #eee;
}

.container {
    margin: 0 auto;
    background: #ddd;
    display: block;
    float: left;
    padding: 5px;
}

.box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    float: left;
}

.box:nth-child(3n+1) {
    clear: left;
}

<div class="wrap">
    <div class="sidebar">
        Sidebar
    </div>
    <div class="container">
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
    </div>
    <div class="sidebar">
        Sidebar
    </div>
</div>

解决方案

The accepted solution wouldn't work for me as I need a child element with display: inline-block to be both horizontally and vertically centered within a 100% width parent.

I used Flexbox's justify-content and align-items properties, which respectively allow you to center elements horizontally and vertically. By setting both to center on the parent, the child element (or even multiple elements!) will be perfectly in the middle.

This solution does not require fixed width, which would have been unsuitable for me as my button's text will change.

Here is a CodePen demo and a snippet of the relevant code below:

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

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

这篇关于CSS 中心显示内联块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆