如何将其与部分中心对齐?

时间:2015-04-09 09:40:44

标签: html css center

我有问题将三个方框对齐到区域的中心。

这是我到目前为止所做的:

	
	/*==============Custome Css ====================*/
	
	
	.slider_patch {
	  background: rgba(63, 61, 61, 0.61);
  padding: 0px 15px;
  box-shadow: 1px 1px 28px #2F2F2F;
}
	
	button.small.skyblue a {
color: #fff;
}
	
	/*==============Custome Css ====================*/
	
	
	
	/* #Misc
	================================================== */
	
	/* EXTRAS */
	
	.brdr-r1, .brdr-r2 { border-right: 1px solid #e5e5e5; padding-right: 19px; }
	.brdr-l1, .brdr-l2 { border-left: 1px solid #e5e5e5; padding-left: 19px; }
	.brdr-r2 { padding-right: 27px; }
	.brdr-l2 { padding-left: 27px; }
	.pad-r27 { padding-right: 27px; }
	.pad-l27 { padding-left: 27px; }
	.alignright { text-align: right; }
	img.alignright { float: right; }
	.alignleft { text-align: left; }
	img.alignleft { float: left; }
	.aligncenter { text-align: center; }
	.wp-caption { display: block; color: #444; }
	.wp-caption-text { font-size: 15px; }
	.sticky { color: #555; }
	.gallery-caption { display: inline; }
	.bypostauthor { font-size: 13px; }
	.moonicons-box1 { font-size: 16px; display: inline-block; width: 15em; padding: .25em .5em; background: #fff; margin: .5em 1em .5em 0; border: 1px solid #e8e8e8; }
	.alignright { text-align: right; }
	img.alignright { float: right; }
	.alignleft { text-align: left; }
	img.alignleft { float: left; }
	.aligncenter { text-align: center; }
	.wp-caption { display: block; color: #444; }
	.wp-caption-text { font-size: 15px; }
	.sticky { color: #555; }
	.gallery-caption { display: inline; }
	.bypostauthor { font-size: 13px; }
	/* Scroll to top */
	#scroll-top a { width: 16px; height: 16px; padding: 6px 8px 9px; border-radius: 4px; background: #818c90; position: fixed; bottom: 48px; right: 32px; display: none; opacity: 0.89; filter: alpha(opacity=89); z-index: 499841; }
	#scroll-top a i { font-size: 16px; color: #fff; display:block; }
	#scroll-top a:hover { background-color: #ffcc00; cursor: pointer; }
	
	h1.pnf404 { font-size: 176px; line-height: 1.1; font-weight:900;}
	h2.pnf404 { font-size: 42px; line-height: 1.2; font-weight:700; }
	input.txbx404 { float:left; margin-top:2px; margin-right:4px; padding:7px 4px; min-height:inherit; border-radius:3px; }
	input.btn404 { float:left; margin:1px; padding:8px 12px 9px; }
	
	.v-shadow-l { background:url(../images/v-shadow-left.png) no-repeat right center; }
	.v-shadow-r { background:url(../images/v-shadow-right.png) no-repeat left center; }
	.v-shadow-r, .v-shadow-l {  min-height:320px; }
	.pad-r10 { padding-right:10px; }
	.pad-r20 { padding-right:20px; }
	.pad-r30 { padding-right:30px; }
	.pad-r40 { padding-right:40px; }
	.pad-l10 { padding-left:10px; }
	.pad-l20 { padding-left:20px; }
	.pad-l30 { padding-left:30px; }
	.pad-l40 { padding-left:40px; }
	
	/* #Column Shortcodes
	----------- */
	.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth { margin-right: 3%; float: left; margin-bottom:2px; }
	.one_half { 	width: 48%; }
	.one_third { width: 30.6666%; }
	.two_third { width: 65.3332%; }
	.one_fourth { width: 22%; }
	.three_fourth { width: 74%; }
	.one_fifth { width: 16.8%; }
	.two_fifth  { width: 37.6%; }
	.column-last { margin-right: 0 !important; clear: right; }
	
	
	.easyPieChart { position: relative; text-align: center; }
	.easyPieChart canvas { position: absolute; top: 0; left: 0; }
	.pie { text-align:center; font-size:49px; position:relative; margin:0 auto 20px; }
	.pie p { font-size:16px; color:#888; font-weight:400; position:absolute; bottom:-52px; width:100%; padding-top:10px; border-top:2px solid #f9f9f9;}
	.container .pie p { margin-bottom:0;}
	
	
	
	/* #Media Queries
	================================================== */
	
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
	
	.img-box { width: 256px; height: 188px; }
	.last-project .img-box { background: #EA3C3C; }
	.last-project .img-box:nth-child(even) { background: #F66060; }
	.ab-box { height: 235px; }
	.author-detail { width: 218px; }
	.comment-contents { width: 343px; }
	.child-comment .comment-contents { width: 263px; }
	.contact input { width: 330px; float: none; }
	.contact textarea { width: 486px; }
	.row.magic, .s-qoute-man { padding: 0; margin-bottom: 10px; }
	a.get { margin-bottom: 14px; }
	.pad-r10, .pad-r20, .pad-r30, .pad-r40 { padding-right: 5px; }
	.pad-l10, .pad-l20, .pad-l30, .pad-l40 { padding-left: 5px; }
	#main-content-pin .container { width: auto; }
	
	}
	
	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	#boxed-wrap { width: 828px; }
	.social-icons a { margin: 1px 4px 0 4px; }
	.row.magic { padding-left: 20px; margin-bottom: 10px; }
	#tline-content { width: 800px; }
	.tline-box { width: 335px; }
	/*#nav a span, #nav a:after { font-size:9px;  }*/
	
	.blog-date-sec { width: 42px; height: 42px; }
	.help-box { width: 50%; }
	
	}
	
	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	
	.sidebar, .rgt-cntt, .sidebar.leftside { padding-right:0; background:none; padding-top:40px; margin-top:40px; border-top:5px solid #e5e5e5;}
	.rgt-cntt, .sidebar.leftside { padding-top:0px; margin-top:0px; border-top:0 none;}
	.contact-form .txbx { width:224px;}
	.pricing-table .plans-f-list.respo { display:inline; visibility:visible;}
	#header.super-fixed { height:auto; box-shadow:none; border-bottom:4px solid #f0f0f0;}
	#headline { height:auto; border-bottom:3px solid #f3f3f3; padding:14px 0; }
	#headline h3 { border-top-color:#f6f6f6; font-size:37px; text-align:center;}
	#headline h3 small { display:block; margin-top:14px; margin-bottom:0; font-size:16px; letter-spacing:0; font-weight:400; }
	.servobx, .servobx div, .servobx img, ul#main-ibox li, ul#main-ibox li.active9  { width:100%; float:none;}
	#search-form { display:none; }
	#header .alignright, top-inf.alignright { text-align:center;}
	#search-form2 { display:block; }
	#side-content { padding-bottom:30px; border-bottom:5px solid #f3f3f3; margin-bottom:40px;}
	
	.top-bar { height:65px; padding:5px 0 6px; background:url(../images/topsobg1.png) repeat-x center center; white-space:nowrap; overflow:hidden;}
	.top-bar h6 { font-size:11px; letter-spacing:0; margin:0 10px 0 0;}
	.top-bar h6 i { font-size:12px; width: 12px; height: 12px; text-align: center; padding:3px; margin-right:3px; }
	.top-bar .socailfollow, .top-links, .top-links.rgtflot, .top-bar .socailfollow.lftflot { float:none; text-align:center; clear:both; min-height:22px;}
	.top-bar .socailfollow, .top-bar .socailfollow.lftflot  {  padding-top:8px;}
	.top-bar .socailfollow a, .top-bar .socailfollow.lftflot a, .top-links p, .top-links img { float:none; display:inline; padding-top:10px; background:none;}
	.top-links, .top-links.rgtflot { margin:0 0 8px 0; padding-top:4px; }
	.top-links.rgtflot { margin-top:12px; margin-bottom:6px;}
	
	.container hr { margin-left:0; margin-right:0;}
	.blog-date-sec { border:0 none; margin:0; text-align:left; border-bottom:1px solid #e5e5e5; background:#fdfdfd;}
	.blog-post { border-bottom-width:3px;}
	
	.nav-search { float: none; margin: 0; }
	.img-box { width: 420px; height: 308px; }
	.comment-contents { width: 328px; margin-right: 0; }
	.child-comment .comment-contents { width: 248px; }
	.contact textarea { width: 398px; }
	
	.author-detail { margin: 20px 0; }
	.blog-date-sec { width: auto; display:block; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: none; border-bottom: 2px solid #e3e3e3; margin-bottom: 5px; }
	.blog-date-sec span, .blog-date-sec h3 { display: inline; margin: 0 10px; line-height: 50px; }
	.blog-date-sec span { font-size: 20px; font-weight: 300; }
	.blog-date-sec h3 { font-size: 32px;}
	
	.contact-form .txbx { width: 224px; }
	.pricing-table .plans-f-list.respo { display: inline; visibility: visible; }
	#headline h3 { border-top-color: #f6f6f6; }
	.image-gallery ul li, .image-gallery ul li img { display:block; width:auto; max-width:100%; height:auto; float:none;}
	

	input[type="text"].header-saerch, input[type="text"].header-saerch:focus { width: 261px; margin-top: 10px; }
	.logo { text-align: center; }
	.pin-box { width: 256px; }
	
	.tline-box .blog-date-sp { width: 80%; }
	.tline-box .blog-com-sp { width: 0; display: none; }
	.tabs-left > .nav-tabs, .tabs-left > .nav-tabs > li > a, .nav-tabs > li, .nav-tabs > li.active, .tabs-left > .nav-tabs > li.active > a, .tabs-left > .nav-tabs .active > a:hover { width:100%; display:block; padding-left:0; padding-right:0; }
	.tabs-left > .nav-tabs > li > a { border-right:0 none;}
	.tabs-left > .tab-content { border:0 none;}
	.tab-content .columns, .tab-content .column { margin:0 10px; max-width:90%; }

	.date-sp-wrap { margin: 0; float: right; margin-bottom: 7px; }
	.blog-line .blog-date-sec { height: auto; }
	.v-shadow-r, .v-shadow-l { min-height: inherit; background: none; }
	.pad-r10, .pad-r20, .pad-r30, .pad-r40, .pad-l10, .pad-l20, .pad-l30, .pad-l40 { padding: 0; }
	.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth { width: 100%; float: none; margin-right: 0; }
	.latest-f-blog, .qot-week { margin:0;}
	.callout { margin:10px 0px 20px; }
	.brdr-l1, brdr-r1 { padding:0; border:0 none; }
	.brdr-l1 { margin-top:30px;}
	.tab-content p, .tab-content li { font-size: 12px; }
	.help-box { width: 100%; }
	.ab-box { height: auto; padding-bottom: 25px; }
	input[type="text"].header-saerch, input[type="text"].header-saerch:focus { float: none; display: inline; position: relative; z-index: 10000; }
	.jcarousel-next, .jcarousel-prev { padding:12px; }
	.jcarousel-prev { right:38px;}
	.jcarousel-next:after, .jcarousel-prev:after { top:13px; right:13px;}
	.our-clients-wrap .jcarousel-next, .our-clients-wrap .jcarousel-prev { padding:10px;}
	
	
	.is-sticky, .is-sticky #header { position:relative; height:auto;}
	.is-sticky #header { margin-top:0;}
	.is-sticky .logo { height:auto; margin-top:0; }
	.is-sticky .logo img { max-height:auto; height:auto; }

	}
	
	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	.help-block { height: auto; }
	#boxed-wrap { width: 460px; }
	.page-subtitle { left: 0; padding: 10px 0 0 20px; bottom: 0; border-bottom: 1px solid #e8edee; margin-bottom: 20px; height: auto; width: auto; clear: both; background: #fdfdfd; border-radius: 0; }
	.contact-form .txbx { width: 338px; }
	.pricing-table .plans-f-list.respo { display: inline; visibility: visible; }
	.jcarousel-item, .last-project .portfolio-item { max-width: 210px; height: 157px; float: left; }
	.pin-box { width: 166px; width: 164px\9; }
	#tline-content { width: 460px; }
	.tline-box { width: 165px; }
	}
	
	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
	
	.nav-wrap2.mn4 #nav a { padding: 15px 4px; }
	#menu a { padding: 15px 4px; }
	.img-box { width: 300px; height: 220px; }
	
	.author-detail { width: 254px; }
	.author-arrow { width: 11px; height: 6px; background: url('../images/testimonial-arrow-top.png') no-repeat; left: 25px; top: -6px; }
	.contact input { width: 288px; margin-right: 0; }
	.contact textarea { width: 278px; }
	#boxed-wrap { width: 340px; }
	.footbot { min-height: 38px; height: auto; }
	
	.page-subtitle { left: 0; padding: 10px 0 0 20px; bottom: 0; border-bottom: 1px solid #e8edee; margin-bottom: 20px; height: auto; width: auto; clear: both; background: #fdfdfd; border-radius: 0; }
	.pricing-table .plans-f-list.respo { display: inline; visibility: visible; }
	.pricing-table ul { width: 136px; }
	.pricing-table ul li { width: 124px; padding: 5px; }
	.pricing-table ul li.plan-header, .pricing-table ul li .plan-title, .pricing-table ul li .plan-price { max-width: 136px; }
	.pricing-table ul li.plan-footer { max-width: 114px; }
	.portfolio-item { margin-bottom: 14px; }
	.commentin { width: 92%; }
	
	#tline-content { width: 300px; }
	.tline-box { width: 250px; }
	.tline-row-l, .tline-row-r { display: none }
	.tline-box.rgtline { float: left; left: 0; }
	}
	
	@media only screen and (min-width: 1200px) {	
	
	 #boxed-wrap { width:1180px;}
	 .white-space { height:110px;}
	  h4.subtitle { margin:39px 0 21px 0; }
	 #main-content-pin .container { padding:0 40px; }
	 .sidebar.leftside { background-position: 295px; padding-right:70px; }
	 .blog-date-sec h3 { font-size:36px;}
	
	 } 
	
	
	@media screen and (min-width: 767px) {
	/* ensure #nav is visible on desktop version */
	#nav {	display: block !important;	}
	.ls-layer h1, .ls-layer h3 { left:10px;}
	
	}	
	
	
	
	button.small.skyblue.demooo {
  width: 65%;
  /*border-bottom: 6px solid rgb(0, 150, 192);*/
}
	
	li.color {
  background-color: rgb(197, 197, 197);
  padding: 4px;
}


section.container.first-block.aligncenter.colorbar {
  /*background: rgb(0, 173, 239);*/
  /* width: 100%; */
  /* left: 10px; */
  padding: 0px 38px 0px 38px;
}
	h4.slight.frontsight {
  color: #333;
}

figure.shop-item.one_fourth.boxwrap {
  background: white;
  margin-bottom:35px;
  border-radius: 4px;
  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.42);
  /*margin-right:10px;
  width: 17%;*/
  /* padding: 6px; */
  /* left: 99px; */
  /* color: black; */
  /* padding: 0px; */
  /* top: 18px; */
}


	
	h4.fronttext {
  font-size: 15px;
  line-height: 24px;
  /* color: black !important; */
}
figure.shop-item.one_fourth.boxwrap:hover {
  background: rgba(239, 239, 239, 1);
  /* color: white; */
}
	/* --------Custom CSS-------------*/
table {
		width:100%;
	}
table  tr{
	height:20px;
	}
table tr td p{
	margin-bottom:0px;
}
tr:nth-child(even) {
	background-color: rgb(166, 206, 244);
}
tr:nth-child(odd) {
	background-color: rgb(207, 230, 252);
}

tr:nth-child(even):hover {
	background-color: rgb(242, 244, 245);
}
tr:nth-child(odd):hover {
	background-color: rgb(242, 244, 245);
}

td:nth-child(even) {
	vertical-align:middle;
	text-align:left;
	padding:10px;
}
td:nth-child(odd) {
	vertical-align:middle;
	text-align:left;
	padding:10px;
}
.parallax-sec .blox{
	padding:20px 0 0px;
}
.eleven.columns .shop-wrap figure{
	margin-right: 3%;
}

table.product-details caption{
	float:left;
}

.product-details{
	width:100%;
}

.contact-inf p{
	margin-bottom:10px;
}
.response{
	height:600px;
	width:80%;
	margin:0 auto;
	display:block;
	padding:60px 50px;
	text-align:center;
	font-size:14;
}
.ls-layer h2{
	font-size:40px !important;
}
/*---------Custom CSS--------------*/
	
	
<section class="container first-block aligncenter colorbar">
				<hr class="vertical-space3">
				<h2 class="mex-title">Welcome to the Polymers Enterprises</h2>
				<h4 class="slight frontsight">Scaling new heights on the strength of Excellence, Efficiency &amp; Ethics</h4>
				<hr class="vertical-space3">
				<div class="services">
				<div class="one_fourth">
					<article class="icon-box1"><i class="fa-user"></i>
						<h5>ABOUT US</h5>
						<p>For over 30 years, Polymers Enterprises has developed a record of service, growth and reliability unsurpassed....</p>
						<button type="button" class="small skyblue demooo" onclick="window.location.href='about.html'">Read more</button>
					</article>
				</div>
				<!--<div class="one_fourth">
					<article class="icon-box1"><i class="li_bulb"></i>
						<h5>EFFICIENCY</h5>
						<p>We have made good relationship with customers by supplying them excellent quality products, which help us to ...</p>
						<button type="button" class="small skyblue demooo" onclick="window.location.href='about.html'">Read more</button>
					</article>
				</div>-->
				<div class="one_fourth">
					<article class="icon-box1"><i class="li_note"></i>
						<h5>WHAT WE DO</h5>
						<p>Our policy is to achieve Quality in supply chain and maximize the serviceability to the client coupled with quality of cost....</p>
						<button type="button" class="small skyblue demooo" onclick="window.location.href='about.html'">Read more</button>
					</article>
				</div>
				<div class="one_fourth column-last">
					<article class="icon-box1"><i class="fa-cubes"></i>
						<h5>OUR PRODUCTS</h5>
						<p>Polymer Enterprises provides a wide range of products and consulting services to customers .....</p>
						<button type="button" class="small skyblue demooo" onclick="window.location.href='our_products.html'">Read more</button>
					</article>
				</div>
				</div>
			</section>

我尝试过width display:blockdisplay:inline-blockmargin: 0 auto,但没有运气。此外,我几乎都遇到了所有问题,但没有人帮助我。任何人都可以帮我把它分类吗?

这是Fiddle

谢谢!

1 个答案:

答案 0 :(得分:3)

让他们display: inline-block确实有效,你只需要删除浮动。

.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth {
    margin-right: 3%;
    display: inline-block; /* remove float and add display inline-block */
    margin-bottom:2px;
}

Demo

注意: 如果您希望每个内容中的内容排成一行,请添加vertical-align:top; demo here < / p>