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

标签 html css twitter-bootstrap layout

很想知道如何使我的图像居中而不是向左浮动。我尝试修改 float 属性，但事情变得一团糟。请帮助! 我使用的部分标签没有任何网格。

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

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>

最佳答案

只需对您的 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

关于html - Bootstrap 3 - 部分 - 如何居中图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27501201/

上一篇：javascript - 更改 ul li 父颜色

下一篇：css - 第二个 child 的伪选择器与第一个 child 完全一样

相关文章：

CSS3 Transformed 元素在转换过程中失去它们的转换。 (包括 jsFiddle)

c# - C# 中的 HttpWebRequest？

jQuery 和 CSS - 图像大小不同时的临时占位符

javascript - html 显示视频文件二进制缓冲区

javascript - 使用 JavaScript 创建的样式在刷新页面之前不会应用

javascript - 如何纠正页脚上重叠的 Accordion

javascript - 如何整合 Bootstrap collapse 和 scrollspy？

html - 优化和压缩 HTML

JavaScript:点击扩展区域

javascript - bootstrap3模态js未定义函数

©2024 IT工具网  联系我们