How do you easily horizontally center a <div> usin-第2页回答

This question already has an answer here:

How to horizontally center a <div>? 93 answers

I'm trying to horizontally center a <div> block element on a page and have it set to a minimum width. What is the simplest way to do this? I want the <div> element to be inline with rest of my page. I'll try to draw an example:

page text page text page text page text
page text page text page text page text
               -------
               | div |
               -------
page text page text page text page text
page text page text page text page text

标签： css html

22条回答

余生请多指教

2楼-- · 2018-12-31 05:38

margin: 0 auto;

as ck has said, min-width is not supported by all browsers

0人赞添加讨论(0) 举报

刘海飞了

3楼-- · 2018-12-31 05:38

You should use position: relative and text-align: center on the parent element and then display: inline-block on the child element you want to center. This is a simple CSS design pattern that will work across all major browsers. Here is an example below or check out the CodePen Example.

p {
  text-align: left;
}
.container {
  position: relative;
  display: block;
  text-align: center;
}
/* Style your object */

.object {
  padding: 10px;
  color: #ffffff;
  background-color: #556270;
}
.centerthis {
  display: inline-block;
}

<div class="container">

  <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius An Maius Septentrionarius Plas Inproportionabilit Constantinopolis Particularisticus.</p>

  <span class="object centerthis">Something Centered</span>

  <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius.</p>
</div>

0人赞添加讨论(0) 举报

爱死公子算了

4楼-- · 2018-12-31 05:40

Here I add proper answer

You can use this snippet code and customize. Here I use 2 child block.This should show center of the page. You can use one or multiple blocks.

<html>
<head>
<style>
#parent {
    width: 100%;
    border: solid 1px #aaa;
    text-align: center;
    font-size: 20px;
    letter-spacing: 35px;
    white-space: nowrap;
    line-height: 12px;
    overflow: hidden;
}

.child {
    width: 100px;
    height: 100px;
    border: solid 1px #ccc;
    display: inline-block;
    vertical-align: middle;
}
</style>
</head>

<body>

<div class="mydiv" id="parent">


<div class="child">
Block 1
</div>
<div class="child">
Block 2
</div>

</div>
</body>
</html>

0人赞添加讨论(0) 举报

梦寄多情

5楼-- · 2018-12-31 05:40

.center {
  height: 20px;
  background-color: blue;
}

.center>div {
  margin: auto;
  background-color: green;
  width: 200px;
}

<div class="center">
  <div>You text</div>
</div>

JsFiddle

0人赞添加讨论(0) 举报

梦寄多情

6楼-- · 2018-12-31 05:40

Add this class to your css file it will work perfectly steps to do:

1) create this first

<div class="center-role-form">
  <!--your div (contrent) place here-->
</div>

2) add this to your css

.center-role-form {
    width: fit-content;
    text-align: center;
    margin: 1em auto;
}

0人赞添加讨论(0) 举报

怪性笑人.

7楼-- · 2018-12-31 05:43

you can use margin: 0 auto on your css instead of margin-left: auto; margin-right: auto;

0人赞添加讨论(0) 举报

How do you easily horizontally center a usin

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间

How do you easily horizontally center a
usin