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

我试图将“下载”按钮放置在其父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>

以下是按钮当前的外观：

按钮非常靠近中心，但不在正确位置，任何帮助都非常感谢

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

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

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

作为记录，我正在使用Mac电脑、Safari浏览器，并在XAMPP中进行测试

谢谢

这：

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

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

---

}

对于下载，您需要在服务器端执行此操作，方法是添加“内容处置”标题字段并将其值设置为“附件”。如果您使用的是aspx/C，您可以使用

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

例如，在下载页面上（fileContent将是图像文件内容的字节数组）。

添加

文本对齐：居中到包含
按钮的标记中
。您还必须设置
display:block用于标记。因为它是一个内联元素

CSS将是：

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

要直接下载，请执行以下操作：

创建另一个php文件。通过$\u 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");
?>

在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代码并将您选择的文件直接下载到用户下载文件

感谢每一位帮助我的人，但这就是最终为我解决问题的原因
这不是因为图像是真实的吗？我的意思是，一个图像上的空白可能比另一个图像上的空白更多？为什么在这里使用
id
而不是
class
？因为您使用
标记和
按钮
元素。这就是单击获取图像的原因。您对哪个元素应用了
text align:center
？你试过把它应用到
*皮肤
元素上吗？@KheemaPandey你还建议我做一个下载按钮吗？我想要的是当你按下按钮时它会下载文件谢谢，但奇怪的是，这把所有的下载按钮都推到了右边，而不是中央。我想最好再回答一次。因为一个问题中有两个问题。谢谢你，除了HTML、CSS和JS之外，我没有任何其他语言的经验。没有服务器端语言，有没有其他方法可以做到这一点？你可以做的是在Web服务器中添加这个标题字段。假设您有三个名为1.jpg、2.jpg和3.jpg的文件。。。您将它们放在两个目录中：一个（普通）目录用于在网站上显示这些文件，另一个目录用于下载，因此每当有人访问此目录中的文件时，标题字段“内容处置”将被发送到。。。因此，您的带有下载链接的图像看起来是这样的：
这里有一个关于如何使用IIS执行此操作的好例子：您好，谢谢，我目前制作了一个新的.php文档，复制并粘贴了上述所有代码，我更改了文件名filename=“skin.png”，我还更改了读取的文件(“到skin.png的根目录，这个文档已经链接到了我的index.html页面，但是我如何使它在我按下下载按钮时执行这段代码，感谢againI，现在我已经找到了如何将它链接到按钮，当我按下下载按钮时，我得到了这个…解析错误：语法错误，意外的‘skin’（T_字符串）在第7行的/Applications/XAMPP/xamppfiles/htdocs/download.php中运行。您可以将该php页面链接到您的按钮。例如，如果您的页面为download.php，您可以尝试此操作。这应该可以运行
<div id="firstskin">
    <div id="topskin"></div>
    <a href="phpdownload/1.php"><button id="downloadbutton" type = "button" name = "Download"> Download </button></a>
</div>