Question

我正在尝试将“下载”按钮放在其父Div的中心，

我试过了：

margin:0 auto;
text-align:center;

此外，我已经尝试在HTML中的按钮周围放置标签，这不起作用，我不打算使用此方法。

我也不想用几个像素添加填充或边距，我只想按钮位于中心，父div有多大。

这是HTML：

<div id="secondinner">
<div id="dailyskin">Todays Daily Skin!</div>

<div id="firstskin">
    <div id="topskin"></div>
    <a href="images/skins/1.png"><button id="downloadbutton1" type = "button" name = "Download"> Download </button></a>
</div>

<div id="secondskin">
    <div id="topskin2"></div>
    <a href="images/skins/1.png"><button id="downloadbutton1" type = "button" name = "Download"> Download </button></a>
</div>

<div id="thirdskin">
    <div id="topskin3"></div>
    <a href="images/skins/1.png"><button id="downloadbutton1" type = "button" name = "Download"> Download </button></a>
</div>

<div id="fourthskin">
    <div id="topskin4"></div>
    <a href="images/skins/1.png"><button id="downloadbutton1" type = "button" name = "Download"> Download </button></a>
</div>

<div id="fithskin">
    <div id="topskin5"></div>
    <a href="images/skins/1.png"><button id="downloadbutton1" type = "button" name = "Download"> Download </button></a>
</div>

<div id="sixskin">
    <div id="topskin6"></div>
    <a href="images/skins/1.png"><button id="downloadbutton1" type = "button" name = "Download"> Download </button></a>
</div>


</div>

This is the third section to the index page.


</div>

这是CSS：

#downloadbutton1 {
width:80%;
background-color:#003366;
border-radius: 2px;
color:white;
transition:200ms;
cursor:pointer;
}

#downloadbutton1:hover {
background-color:#336699;
transition:200ms;

}

#firstskin {
width:110px;
overflow:hidden;
float:left;
}
#secondskin, #thirdskin, #fourthskin, #fithskin, #sixskin{
width:100px;
overflow:hidden;
float:left;
padding-left:10px;

}

#topskin {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:110px;
dislpay:inline-block;
float:left;
margin-top:5px;
transition:150ms;
}


#topskin2 {
background-image:url(images/topskins/2f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:75px;
transition:150ms;
}

#topskin3 {
background-image:url(images/topskins/3f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:75px;
transition:150ms;
}

#topskin4 {
background-image:url(images/topskins/4f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:75px;
transition:150ms;
}

#topskin5 {
background-image:url(images/topskins/5f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:75px;
transition:150ms;
}

#topskin6 {
background-image:url(images/topskins/6f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:75px;
transition:150ms;

}

#topskin:hover {
background-image:url(images/topskins/1b.png);
transition:150ms;

}

#topskin2:hover {
background-image:url(images/topskins/2b.png);
transition:150ms;

}

#topskin3:hover {
background-image:url(images/topskins/3b.png);
transition:150ms;

}

#topskin4:hover {
background-image:url(images/topskins/4b.png);
transition:150ms;

}

#topskin5:hover {
background-image:url(images/topskins/5b.png);
transition:150ms;

}

#topskin6:hover {
background-image:url(images/topskins/6b.png);
transition:150ms;

}

这是按钮目前的样子：

按钮非常接近中心，但它没有点，任何帮助都非常感谢。

我的第二个问题是，当我使用此HTML作为我的下载按钮时

a href="images/skins/1.png"><button id="downloadbutton1" type = "button" name = "Download"> Download </button></a>

它不会将PNG下载到用户下载文件，但它只是更改当前页面并显示图像源，我希望该按钮可以直接下载，按下时会将其下载到用户计算机而不是只是向他们展示图像。

我记录的是使用Mac电脑，Safari浏览器和XAMPP测试

由于

Answer 1

FIDDLE

将text-align:center;添加到包含button的标记中。您还必须为标记设置display:block;。因为它是一个内联元素。

CSS将是：

a { text-align:center; display:block }

Answer 2

对于下载，您需要执行此服务器端，方法是添加“Content-Disposition”标题字段并将其值设置为“attachment”。如果您使用的是aspx / C＃，可以使用

Response.Clear();
Response.ClearHeaders();
Response.ContentType = "image/png";
Response.AddHeader("Content-Disposition", "attachment; filename='yourimage.png'");
Response.BinaryWrite(fileContent);

例如，在下载页面上的

（fileContent将是图像文件内容的字节数组）。

Answer 3

直接下载：

创建另一个php文件。通过$ _GET以您的文件名和位置发送，然后尝试以下

<?php
 ob_start();
 header("Expires: 0"); 
 header("Cache-Control: must-revalidate, post-check=0, pre-check=0"); 
 header("Content-Type: application/force-download"); 
 header("Content-Description: File Transfer"); 
 header("Content-Disposition: attachment; filename="yourFileName.jpg"); // supply filename here

 //supply the location of your file below
 readfile("images/image.jpg");
?>

让我知道它是否有效

Answer 4

要在Web服务器上托管文件，以便可以通过按下按钮将其直接下载到用户计算机，这就是所需的全部PHP：

 <?php
$path = "../images/skins/1.png";
$filename = "1.png";

header("Content-Type:image/gif");
header("Content-Disposition: attachment; filename=".$filename);
header("Cache-control: private");
header('X-Sendfile: '.$path);
readfile($path);
exit;
?>

对于HTML：

<div id="firstskin">
    <div id="topskin"></div>
    <a href="phpdownload/1.php"><button id="downloadbutton" type = "button" name = "Download"> Download </button></a>
</div>

当用户按下名为'downloadbutton'的HTML按钮时，a href检测到这个并查找下一个要运行的代码的来源，在这种情况下，a href的根是php文档，因此它运行PHP代码并将您选择的文件直接下载到用户下载文件。

感谢所有帮助过我的人，但这最终为我解决了这个问题

Answer 5

这个：

#downloadbutton1 {
  width:80%;
  display:block;
  margin:auto;

  background-color:#003366; 
  border-radius: 2px;
  color:white;
  transition:200ms;
  cursor:pointer;

}

将HTML按钮定位在其父div的中心。

5 个答案: