如何让我的三个图标居中对齐，就像我的内容中的文字一样？ [英] How do i get my three icons to center align like the text in my content?
本文介绍了如何让我的三个图标居中对齐，就像我的内容中的文字一样？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的HTML：
< ！doctype html >
< html >
< head >
< meta charset = utf-8 >
< title > 投资组合网站< / title >
< link href = portfolio.css rel = 样式表 type = text / css >
< link href =' https://fonts.googleapis.com/css?family=Oswald' rel =' stylesheet' 类型 =' text / css' >
< link href =' < span class =code-keyword> https://fonts.googleapis.com/css?family=Raleway' rel =' stylesheet' 类型 =' text / css' >
< link rel = stylesheet href = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css >
< link rel = stylesheet href = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css < span class =code-keyword>>
<！ - 旧IE 8及以下的条件评论 - >
<！ - [if lt IE 9]>
< script src =https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js>< / script>
< script src =https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js>< / script>
<！[endif] - >
< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min。 js > < / script >
< script type = text / javascript >
var ypos，image;
function parallax（）{
ypos = window .pageYOffset;
image = document .getElementById（' image ）;
image.style.top = ypos *。 0 + ' PX';
}
window .addEventListener（' 滚动'，视差）
< / script >
< / head >
< body >
< div id = background >
< img < SP class =code-attribute> id = image src = portfolio_images / main-image1.png height = 10％ width = 100％ / >
< a class = ghost href = http://www.ghostbusters.com/ < span class =code-keyword>> PORTFOLIO < / a >
< / div >
< div class = content > <！ - 内容开始 - >
< div class = row > <！ - start div row - >
< div class = col-md-4 >
< h4 类 = text-center > 网页设计< / h4 >
< p > Confer < br < br > >> 在我的网页设计过程中。< / p >
< div > < img src = portfolio_images / web1.png width = 64 height = 64 > < / div < span class =code-keyword>>
< / div >
< div class = col-md-4 >
< h4 类 = text-center > 编码< / h4 >
< p > 编程经验< br > 等语言，例如< br > HTML5和CSS。< / p >
< div > < img src = portfolio_images / css1.png width = 64 height = 64 > < / div >
< / div >
< div class = col-md-4 >
< h4 class = text-center > 平面设计< / h4 >
< p > < span class =code-keyword>< br > 传送信息< br > 。< span class =code-keyword>< / p >
< div > < img src = portfolio_images / graphic1.png width = 64 height = 64 > < / div >
< / div >
< / div > <！ - end div row - >
< / div >
< br >
< hr width = 100％ noshade >
< / body >
< / html >
< pre lang = HTML >
这里是我的CSS：
@ charset utf-8;
/ * CSS Document * /
body {
max-height ： 50％;
}
* {
保证金 ： 0px;
填充 ： 0px;
}
＃ image {
position ： relative;
z-index ： -1;
max-height ： 50％;
}
＃内容 {
height ： 750px;
width ： 100％;
margin-bottom ： 700px;
background-color ： #FFFFFF;
位置 ： relative;
z-index ： 1;
}
。简介 {
font-family ： < span class =code-keyword>'Pacifico'，草书;
font-size ： 150px;
颜色 ： #fff;
text-align ： center;
padding-top ： 30px;
position ： static;
}
。 logo {
margin ： 0 0 0 0 ;
position ： 已修复;
opacity ： 0.4;
过滤器 ： alpha（ opacity = 40）; / * 对于IE8及更早版本* /
}
。 ghost {
/ * 以位置为中心* /
display ： 内联块;
position ： relative;
top ： 10％;
left ： 50％;
- webkit-transform ： translateX（-50％）translateY（-50％）;
- ms-transform ： translateX（-50％）translateY（-50％）;
transform ： translateX（-50％）translateY（-50％）;
/ * 文字样式* /
font-family ： 'Oswald'，sans-serif;
font-size ： 3em;
letter-spacing ： 0.1em ;
color ： ＃ebbb13;
/ * 修改文字* /
text-decoration ： none;
text-transform ： 大写;
< span class =code-attribute> text-rendering ： optimizeLegibility;
/ * 添加边框* /
border ： 0.15em solid＃ebbb13;
padding ： 0.4em 0.6em;
/ * 动画更改* /
-webkit-transition ： 颜色300毫秒，背景500毫秒，边框颜色700毫秒;
过渡 ： 颜色300毫秒，背景500毫秒，边框-color 700ms;
}
。 ghost：hover {
后台 ： ＃000;
border-color ： ＃ebbb13;
color ： ＃fff;
text-decoration ： 无;
}
＃背景 {
max-height ： 50％;
}
。行 {
max-width ： 100％;
}
。 text-center {
font-family ： Oswald;
}
p {
font-family ： 'Raleway'，sans-serif;
text -align ： center;
字体大小 <跨度class =code-keyword>： 12px;
}
h3 {
text-align ： 中心;
}
我的尝试：
我尝试将图像本身放在div中。没用。
解决方案
试试：
< div class = text-center > < img src = imageURL > < p > ; 您的文字。< / p > < / div >
Here's my HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Portfolio Site</title>
<link href="portfolio.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- conditional comments for old IE 8 and below -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
var ypos,image;
function parallax () {
ypos = window.pageYOffset;
image = document.getElementById('image');
image.style.top = ypos * .0 +'px';
}
window.addEventListener('scroll',parallax)
</script>
</head>
<body>
<div id="background">
<img id="image" src="portfolio_images/main-image1.png" height="10%" width="100%" />
<a class="ghost" href="http://www.ghostbusters.com/">PORTFOLIO</a>
</div>
<div class="content"><!--content start-->
<div class="row"><!--start div row-->
<div class="col-md-4">
<h4 class="text-center">Web Design</h4>
<p>Confer<br>with clients<br>in my web design process.</p>
<div><img src="portfolio_images/web1.png" width="64" height="64"></div>
</div>
<div class="col-md-4">
<h4 class="text-center">Coding</h4>
<p>Experience in programming<br>languages such as<br>HTML5 and CSS.</p>
<div><img src="portfolio_images/css1.png" width="64" height="64"></div>
</div>
<div class="col-md-4">
<h4 class="text-center">Graphic Design</h4>
<p><br>Conveying information<br>through visual solutions.</p>
<div><img src="portfolio_images/graphic1.png" width="64" height="64"></div>
</div>
</div><!--end div row-->
</div>
<br>
<hr width="100%" noshade>
</body>
</html>
<pre lang="HTML">
HERE'S MY CSS:
@charset "utf-8";
/* CSS Document */
body {
max-height: 50%;
}
*{
margin: 0px;
padding: 0px;
}
#image {
position: relative;
z-index: -1;
max-height: 50%;
}
#content {
height: 750px;
width: 100%;
margin-bottom: 700px;
background-color: #FFFFFF;
position: relative;
z-index: 1;
}
.intro {
font-family: 'Pacifico', cursive;
font-size: 150px;
color: #fff;
text-align: center;
padding-top: 30px;
position: static;
}
.logo {
margin: 0 0 0 0;
position: fixed;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
.ghost {
/* position centered */
display:inline-block;
position: relative;
top: 10%;
left:50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
/* text styles */
font-family: 'Oswald', sans-serif;
font-size: 3em;
letter-spacing: 0.1em;
color:#ebbb13;
/* modify text */
text-decoration:none;
text-transform:uppercase;
text-rendering:optimizeLegibility;
/* add a border */
border:0.15em solid #ebbb13;
padding:0.4em 0.6em;
/* animate the change */
-webkit-transition: color 300ms, background 500ms, border-color 700ms;
transition: color 300ms, background 500ms, border-color 700ms;
}
.ghost:hover {
background:#000;
border-color:#ebbb13;
color:#fff;
text-decoration:none;
}
#background {
max-height: 50%;
}
.row {
max-width: 100%;
}
.text-center {
font-family: Oswald;
}
p {
font-family: 'Raleway', sans-serif;
text-align: center;
font-size:12px;
}
h3 {
text-align: center;
}
What I have tried:
I've tried putting the images itself in a div. Didn't work.
解决方案
Try:
<div class="text-center"><img src="imageURL"><p>Your text.</p></div>
这篇关于如何让我的三个图标居中对齐，就像我的内容中的文字一样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
