Question

我试图将社交图标集中在页面底部的中间，但我似乎无法做到正确：

我尝试过使用display：block，inline等，似乎没有任何工作，以使社交图像在中间水平居中，然后位于页面底部。

代码：

＆＃13;

.socialIcons img {
  height: 50px;
  width: 50px;
  opacity: 0.4;
  filter: alpha(opacity=40);
  margin-right: 10px;
}
.icons img {
  position: relative;
  display: inline;
  margin-right: 0 auto;
  margin-left: 0 auto;
}

.socialIcons img:hover {
  opacity:1;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Arshdeep Soni</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, inital-scale=1">

    <link rel="stylesheet" type="text/css" href="reset.css">
  </head>

  <body>
    <div class="header">
      <ul>
        <li><a href=#>HOME</a></li>
        <li><a href=#>VIDEOS</a></li>
        <li><a href=#>IMAGES</a></li>
        <li><a href=#>TESTIMONIALS</a></li>
        <li><a href=#>CONTACT</a></li>

      </ul>
    </div>
    <div class="icons">
      <a class="socialIcons" href="http://www.pixelfrau.com/feed" title="Subscribe to Pixel Frau" alt="Pixel Frau RSS Icon"><img src="youtube.png" /></a>
      <a class="socialIcons" href="http://twitter.com/PixelFrau" title="Follow Pixel Frau on Twitter" alt="Pixel Frau Twitter Icon"><img src="twitter.png" /></a>
      <a class="socialIcons" href="http://www.facebook.com/PixelFrau" title="Like Pixel Frau on Facebook" alt="Pixel Frau Facebook Icon"><img src="fb.png" /></a>
      <a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="youtube.png"/></a>
    </div>
  </body>
</html>

＆＃13;

Answer 1

您需要居中父元素，而不是图标。

declare @t table (RowID INT,FileId INT,Filename VARCHAR(20),Colmatch INT)
insert into @t (RowID,FileId,Filename,Colmatch)values 
(1,1,'file1.csv',0),
(2,1,'file2.csv',0),
(3,1,'file3.csv',1),
(4,1,'file4.csv',1)

;with CTE AS (Select RowID,FileId,Filename,Colmatch,ROW_NUMBER()OVER(PARTITION BY Colmatch ORDER BY (select NULL))RN from @t )
,CTE1 AS (
select MAX(RowID)RowID,FileId,MIN(Filename)Filename,MAX(Colmatch)Colmatch from cte where RN = 1
GROUP BY FileId  )
,CTE2 AS (
select MAX(RowID)RowID,FileId,MIN(Filename)Filename,MAX(Colmatch)Colmatch from cte where RN = 2 
GROUP BY FileId )

select * from CTE1
UNION ALL 
select * from CTE2

https://jsfiddle.net/av8wadwh/

Answer 2

将text-align: center;用于.icons

.icons{
    text-align: center;
   position: absolute; bottom: 10px; left: 0;
   width: 100%;
}
.socialIcons img {
                    height: 50px;
                    width: 50px;
                    opacity: 0.4;
                    filter: alpha(opacity=40);
                    margin-right: 10px;
                }
                .icons img {
                    position: relative;
                    display: inline;
                    margin-right: 0 auto;
                    margin-left: 0 auto;
                }

                .socialIcons img:hover {
                    opacity:1;
                }

<div class="header">
            <ul>
                <li><a href=#>HOME</a></li>
                <li><a href=#>VIDEOS</a></li>
                <li><a href=#>IMAGES</a></li>
                <li><a href=#>TESTIMONIALS</a></li>
                <li><a href=#>CONTACT</a></li>

            </ul>
        </div>
            <div class="icons">
        <a class="socialIcons" href="http://www.pixelfrau.com/feed" title="Subscribe to Pixel Frau" alt="Pixel Frau RSS Icon"><img src="youtube.png" /></a>
<a class="socialIcons" href="http://twitter.com/PixelFrau" title="Follow Pixel Frau on Twitter" alt="Pixel Frau Twitter Icon"><img src="twitter.png" /></a>
<a class="socialIcons" href="http://www.facebook.com/PixelFrau" title="Like Pixel Frau on Facebook" alt="Pixel Frau Facebook Icon"><img src="fb.png" /></a>
<a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="youtube.png"/></a>
            </div>

Answer 3

通过添加以下css使图标居中： .icons { 宽度：10em; 保证金：0自动; }

如何将社交图标置于页面底部 - HTML

3 个答案: