Question

例如，我的HTML可能是以下之一：

<p>文字，其宽度设置为400
包含少量输入且没有设置总宽度的表单
没有设置总宽度的<table>
或其他任何东西

换句话说 - 在你将上述任何一个放在中心之前，它们自然就在左边。是否有可能以HTML为中心？

编辑：让我澄清一下。 HTML的大块可以是任何东西：内联，块，三个div和2 ps，5个表和一个div，一个div内的div等等。这个html块不知道它会被居中而不是允许居中。我想要的东西 - 让我们在父div中包装这个HTML块，然后只在父div上使用CSS。你没有调整HTML块的东西。我希望它不是垂直地水平居中。我希望它如同它仍然在左边那样呈现。

Answer 1

嘿，有两个选项首先是很老的选项

<center>
//your html any element 
</center>

但这是非常古老的方法

并且新选项是

你可以像这样使用

<强> CSS

.ok{
border:solid 1px red;
  width:400px;
  text-align:center;
}
table{
margin:0 auto;
}

<强> HTML

<div class="ok">

<p>
Hello
</p>

<a href="#">a</a>
<form>
<input type="text">
</form>

  <table border="1">
    <tr><td>hi</td></tr>
  </table>

  </div>

现场演示http://tinkerbin.com/j1A3HIK9

Answer 2

如果要将元素集中设置为另一个元素，请指定子元素相对定位或仅默认定位（绝对定位不会！），给它一个固定的宽度，将其边距设置为0 auto，它将在父元素内水平居中。当然，没有办法垂直居中，你必须自己明确地做。

Answer 3

是的，您可以注意到所有元素。

拿这个HTML：

<body>

<div class="canvas">

    <p>This is a really lovely but meaningless piece of text</p>

    <div class="form-container">

        <form>

            <input type="text" name="example" placeholder="Enter some example text" />

        </form>

    </div>

</div>

</body>

所以我们想要集中一些元素。让我们从包含DIV #canvas开始，然后从那里移动。

/* First a very crude reset on <body> and declare it's dimensions */

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

/* Next we must declare a definitive width of our #canvas to allow
   us to centre itself and elements within it. */

#canvas {
    width:960px;
    position:relative;
    margin: 0 auto; /* This 'auto' on left / right margin centers it
}

/* Note that <p> tags are auto 100% width so centering them is not
   going to do anything with the above technique. Instead: */

#canvas p {
    text-align: center;
}

/* Now form elements, no need to style <form> it is a meta container
   and really shouldn't be used for anything other than that, lets
   style the actual input elements instead */

#canvas form input {
    width: 30%; /* Lets define a width so that we can center it in */
    margin: 0 auto;
}

希望对你有所帮助。

如何集中任意一块HTML？

3 个答案: