How do you easily horizontally center a
using CSS? [duplicate]

前端未结

关注

 22  3069

醉话见心

相关标签:

22条回答

遥遥无期

2020-11-22 02:45
In the case of a non-fixed width div (i.e. you don't know how much space the div will occupy).
```
#wrapper {
  background-color: green; /* for visualization purposes */
  text-align: center;
}
#yourdiv {
  background-color: red; /* for visualization purposes */
  display: inline-block;
}
```
```
<div id="wrapper">    
    <div id="yourdiv">Your text</div>
</div>
```
Keep in mind that the width of #yourdiv is dynamic -> it will grow and shrink to accommodate the text inside it.

You can check browser compatibility on Caniuse
0 讨论(0)
发布评论:

提交评论
- 加载中...

情歌与酒

2020-11-22 02:45

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)

误落风尘

2020-11-22 02:45
The best response to this question is to use margin-auto but for using it you must know the width of your div in px or %.

CSS code:
```
div{
    width:30%;
    margin-left:auto;
    margin-right:auto;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

面向向阳花

2020-11-22 02:46

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)

自闭症患者

2020-11-22 02:47
you can use the position:relative; and then set the left and the top values:
```
.cenverDiv{
    position:relative;
    left:30%;
    top:0px;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

花落未央

2020-11-22 02:48

The title of the question and the content is actually different, so I will post two solutions for that using Flexbox.

I guess Flexbox will replace/add to the current standard solution by the time IE8 and IE9 is completely destroyed ;)

Check the current Browser compatibility table for flexbox

Single element

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

<div class="container">
  <img src="http://placehold.it/100x100">
</div>

Multiple elements but center only one

Default behaviour is flex-direction: row which will align all the child items in a single line. Setting it to flex-direction: column will help the lines to be stacked.

.container {
  display: flex;
  flex-direction: column;
}
.centered {
  align-self: center;
}

<div class="container">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
   </p>
  <div class="centered"><img src="http://placehold.it/100x100"></div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>

0 讨论(0)

1 2 3 4 下一页

热议问题

How do you easily horizontally center a using CSS? [duplicate]

How do you easily horizontally center a
using CSS? [duplicate]