Bootstrap 3 - 部分 - 如何居中图像

时间：2014-12-16 09:21:32

标签： html css css3 twitter-bootstrap layout

很想知道如何让我的图像居中不浮动到左边。我尝试修改浮动属性，但事情就变得混乱了。请帮忙！ 我正在使用节标签，没有网格任何东西。

当我将浮动设置为“无”时，会发生这种情况

enter image description here 

#hover {
  color: rgba(188, 175, 204, 0.9); 
}

h2#testimonials {
  color: #E72635;
}

div#all {
  width: 100%;
  height: 100%;
}

/* generic css */
.view {
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 0px 20px 0px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}


/*2*/

.view-second img {  
    transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
}
.view-second .mask { 
    background-color: rgba(12, 19, 27, 0.6); 
    width: 400px;
    padding: 105px;
    height: 450px;
    opacity: 0;
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out;
}
.view-second h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
    background: transparent;
    margin: 20px 40px 0px 40px;
    opacity: 0;
    color: #8F1925;
    transform: scale(0);
    transition: all 0.5s linear 0s;
}
.view-second p { 
    transform: scale(0);
    transition: all 0.5s linear 0s;
}
.view-second a.info { 
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}

/* */

.view-second:hover .mask { 
    opacity:1; 
    transform: translate(-80px, -125px) rotate(45deg);
    -webkit-transform: translate(-80px, -125px) rotate(45deg);
}                             


.view-second:hover h2,
.view-second:hover p,
.view-second:hover a.info{ 
    transform: scale(1);
    opacity: 3;
}

img#articlePic {
    height: 200px;
    width: 300px;
}
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>The University Digest</title>
		<link rel="shortcut icon" href="img/logo1.png" />
		<!-- Bootstrap Core CSS -->
		<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- Custom CSS -->
		<link href="css/template.css" rel="stylesheet">
		<link href="css/indexObjects.css" rel="stylesheet">
		<!-- Fonts -->
		<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
		<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
		<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
	</head>

	<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
		<!-- Header Container -->
		<div class="container-full" id="headerC">
			<header class="masthead">
				  <p id="headerP">The University Digest</p>
				  <p id="subheader">The Official Student Publication of Western Mindanao State University</p>
			</header>
		</div>

		<!-- Navigation -->
		<div id="nav">
		
		<!--  Content Layout -->
		<!-- Portfolio Grid Section -->
		<section id="portfolio" class="bg-light-gray">
			<div class="container">
				<div class="rows">
					<div class="col-lg-12">
						<h2 class="section-heading">Articles</h2>
					</div>
					<div id="all">
					<div class="view view-second">
						  <img src="http://goo.gl/n6eiy5"  class="img-responsive img-full" alt="" id="articlePic"  />
							<div class="mask"></div>
							<div class="content">
								<h2 id="testimonials">Testimonials</h2>
								<p>&ldquo;A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.&rdquo;</p>
								<a href="#" class="info">Read More</a>
							</div>
						</div>  
	
						
					<div class="view view-second">
						  <img src="http://goo.gl/ikGTbN"  class="img-responsive" alt="" id="articlePic" />
							<div class="mask"></div>
							<div class="content">
								<h2 id="testimonials">Testimonials</h2>
								<p>&ldquo;A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.&rdquo;</p>
								<a href="#" class="info">Read More</a>
							</div>
					</div>  

					<div class="view view-second">
						  <img src="http://jacobstone.co.uk/Livetesting/guy.jpg"  class="img-responsive" alt="" id="articlePic" />
							<div class="mask"></div>
							<div class="content">
								<h2 id="testimonials">Testimonials</h2>
								<p>&ldquo;A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.&rdquo;</p>
								<a href="#" class="info">Read More</a>
							</div>
					</div>  

					<div class="view view-second">
						  <img src="http://jacobstone.co.uk/Livetesting/guy.jpg"  class="img-responsive" alt="" id="articlePic"/>
							<div class="mask"></div>
							<div class="content">
								<h2 id="testimonials">Testimonials</h2>
								<p>&ldquo;A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.&rdquo;</p>
								<a href="#" class="info">Read More</a>
							</div>
					</div>  

					<div class="view view-second">
						  <img src="http://jacobstone.co.uk/Livetesting/guy.jpg"  class="img-responsive" alt="" id="articlePic"/>
							<div class="mask"></div>
							<div class="content">
								<h2 id="testimonials">Testimonials</h2>
								<p>&ldquo;A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.&rdquo;</p>
								<a href="#" class="info">Read More</a>
							</div>
					</div> 

					<div class="view view-second">
						  <img src="http://jacobstone.co.uk/Livetesting/guy.jpg"  class="img-responsive" alt="" />
							<div class="mask"></div>
							<div class="content">
								<h2 id="testimonials">Testimonials</h2>
								<p>&ldquo;A description of some sort between these tags. I am so cool ye and awesomely awesome. He was cool.&rdquo;</p>
								<a href="#" class="info">Read More</a>
							</div>
					</div> 

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

4 个答案:

答案 0 :(得分：3)

只需在您的CSS中进行一些更改，您就可以通过下面提到的css轻松获得所需的结果

<强> CSS 

div#all {
    border: 1px solid;
    display: block;
    height: 100%;
    overflow: hidden;
    text-align: center;
    width: 100%;
}


.view {
    background: url("../images/bgimg.jpg") no-repeat scroll center center #FFFFFF;
    border: 10px solid #FFFFFF;
    box-shadow: 1px 1px 2px #E6E6E6;
    cursor: default;
    display: inline-block;
    margin: 10px;
    overflow: hidden;
    position: relative;
    text-align: center;
}

DEMO

答案 1 :(得分：1)

对于居中元素的好margin: 0 auto;怎么样？

答案 2 :(得分：1)

好吧，为什么这个，以图像为中心？

display: block;
margin-left: auto;
margin-right: auto

另一种可能的解决方案可能是display: table-cell; css规则，然后是水平/垂直对齐。我目前正在工作，无法测试它。

答案 3 :(得分：1)

.view {
    background: url("../images/bgimg.jpg") no-repeat scroll center center #fff;
    border: 10px solid #fff;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    display: block;
    margin: auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 300px;
}

相关问题
最新问题