如何使div的水平线居中？

Question

我需要三个盒子居中并水平排序。现在我有中心但只有垂直：

以下是该框的CSS：

selectionIndicatorImage

非常感谢任何帮助。

Answer 1

授予<?php namespace App\Http\Controllers\BackEnd; use App\Http\Requests; use App\Http\Controllers\Controller; use Input; use Illuminate\Http\Request; use Mail; class MailController extends Controller { /** * Sends Mail. * * @return Response */ public function sendMail() { $user = Input::all(); Mail::send('emails.simpleMail', $user, function($message) { $message->to(Input::get('emailto'))->subject('Simple Mail!'); }); } } 一个.box和display: inline-block以使它们在彼此旁边对齐。如果您使用获得vertical-align: top的{​​{1}} .container围绕它，则内联内容会水平居中。

＆＃13;

＆＃13;

<div>

＆＃13;

text-align: center

＆＃13;

＆＃13;

＆＃13;

使用CSS进行水平和垂直居中的绝佳资源是https://css-tricks.com/centering-css-complete-guide/

Answer 2

＆＃13;

＆＃13;

.box1 {
	display: table;
    margin: 0 auto;
}
.box {
	background-color: #9FDCED;
	display: inline-block;
	height: 200px;
	width: 200px;
}

＆＃13;

<div class="box1">
	<div class="box" style="background:#cc0000;"></div>
	<div class="box" style="background:#cceeff;"></div>
	<div class="box" style="background:#eeccff;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需向float:left;课程添加.box即可。喜欢这个

.box {
  margin: 5px;
  background-color: #9FDCED;
  display: block;
  height: 100px;
  width: 100px;
  padding: 5px;
  float: left;
}

使用JSFiddle http://jsfiddle.net/wcvgs1zb/