Question

我想在页面底部的页脚中放置两个用于向前和向后导航的图标，它们之间的间距为10px。

两个图标必须位于同一垂直水平，并且水平居中。我怎么能这样做？

<div id="footer"> 
  <i id="left" class="fa fa-caret-left fa-5x"></i>
  <i id="right" class="fa fa-caret-right fa-5x"></i>    
</div>

Answer 1

为它们创建一个水平居中的容器并将它们放在那里。只要两个图标在一起并不比屏幕大，它们就会并排显示。要在它们之间创建10px的空间，您可以在第一个元素的右侧添加一个边距，如下所示：

<!-- website -->
<div style="text-align: center">
    <span style="margin-right: 10px">ICON</span><span>ICON</span>
</div>
<!-- website -->

用图标替换span标签。

编辑：我看到你编辑了你的问题，提供的代码应该足以添加＆＃34; text-align：center＆＃34;到页脚的css和＆＃34;页边距：10px＆＃34;到左边的CSS

Answer 2

如果您对父元素使用dependencies { compile fileTree(include: ['*.jar'], dir: 'libs') testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:23.1.1' compile 'com.android.support:design:23.1.1' compile 'me.drakeet.materialdialog:library:1.2.2' compile 'com.mcxiaoke.volley:library:1.0.17' compile 'com.github.bumptech.glide:glide:3.7.0' compile 'se.simbio.encryption:library:1.2.0' compile 'com.daasuu:animateHorizontalProgressBar:0.2.0' compile('com.crashlytics.sdk.android:crashlytics:2.5.5@aar') { transitive = true; } // Loader compile 'com.wang.avi:library:1.0.0' compile 'com.nineoldandroids:library:2.4.0' compile 'com.github.michaelye.easydialog:easydialog:1.4' compile 'com.michaelpardo:activeandroid:3.1.0-SNAPSHOT' **compile('com.paypal.sdk:paypal-android-sdk:2.13.0') { exclude group: 'io.card'//disable the card io feature for scanning card }** compile 'com.google.apis:google-api-services-youtube:v3-rev171-1.22.0' compile files('libs/YouTubeAndroidPlayerApi.jar') compile files('libs/mediaplayersdk.jar') compile 'com.google.android.gms:play-services-gcm:8.4.0' }而对子元素使用display:table;，则可以将它们水平居中对齐。

https://jsfiddle.net/3do9gvx3/1/

display:table-cell;

#footer{
  display:table;
  background:red;
  width:100%;
  height:100px;
}
#footer i{
  padding: 5px;
  height: calc(100% - 10px);
  vertical-align: middle;
  display: table-cell;
}
#left{
  text-align:right;
}

左右箭头图标以div为中心

2 个答案: