Positioning a HTML button within the centre of its parent div.

Question

I am trying to position the 'Download' button within the centre of its parent Div,

I have tried:

margin:0 auto;
text-align:center;

Also i have tried putting tags around the button in HTML, this did not work and i do not intend to use this method.

I also don't want to add padding or margin by a few pixels, i would simply like the button to be in the centre, how ever big the parent div is.

Here is the 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>

Here is the 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;

}

Here is what the buttons currently look like:

The buttons are very close to the centre but its not spot on, Any help is great thanks.

My second problem is that when i use this HTML as my download button

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

It does not download the PNG to the users download file, however it just changes the current page and shows the image source, i would like the button to work as a direct download and when pressed it gets downloaded to the users computer instead of just showing them the image.

For the record i am using a Mac computer, Safari Browser, and testing in XAMPP

Thanks

Isn't this because the image is? What I mean by this is there is perhaps more whitespace on one image than the other? — Dr Schizo, Aug 08 '14 at 12:04
because you are using `` tag with `button` element. this is the reason on click you get the image. — Kheema Pandey, Aug 08 '14 at 12:06
To which element did you apply `text-align: center`? Did you try applying it to the `*skin` elements? — Harry, Aug 08 '14 at 12:07
@KheemaPandey How else would you suggest i make a download button, all i want is when you press the button it downloads the file — Bradley, Aug 08 '14 at 12:10
How do you suggest doing it? if possible can it be done in html ? — Bradley, Aug 08 '14 at 12:17

score 1 · Answer 1 · answered Aug 08 '14 at 12:14

1

FIDDLE

Add text-align:center; into a tag containing button. Also you have to set display:block; for a tag. Because its a inline element.

CSS Will Be:

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

answered Aug 08 '14 at 12:14

Husen

955
1
6
16

score 0 · Answer 2 · answered Aug 08 '14 at 12:12

0

For the download you would need to do this server side, by adding the "Content-Disposition" header field and setting its value to "attachment". If you're using aspx/C# you can do that by using

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

on the download page for example (fileContent would be a byte array of the image file content).

answered Aug 08 '14 at 12:12

Markus Szumovski

114
1
4

Thanks for this, I have no experience with any language other than HTML, CSS and JS, is there any way possible this can be done without a server side language ? – Bradley Aug 08 '14 at 12:18
What you can do is adding this header field in the webserver. Let's say you have three files called 1.jpg, 2.jpg and 3.jpg... you put them in two directories: One (the "normal") directory is for displaying those files on the website, and the other directory is for download, so whenever someone accesses the files in this directory, the header field "Content-Disposition" will be sent along... so your image with download link would look something like this: `` – Markus Szumovski Aug 11 '14 at 10:34
Here's a good example of how to do this with IIS: http://stackoverflow.com/questions/1040328/force-png-to-download-instead-of-opening-in-browser-with-iis – Markus Szumovski Aug 11 '14 at 10:35

score 0 · Answer 3 · answered Aug 08 '14 at 12:26

0

For the direct download this:

Create another php file. Send in your name of the file and location via $_GET and then try the following

<?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");
?>

Let me know if it works

answered Aug 08 '14 at 12:26

MD Singh

1,455
1
9
17

Hi, Thanks, I have currently made a new .php document and copy and pasted in all the above code, i have changed filename="skin.png" which is the name of the file, I have also changed the read file(" To the root of the skin.png, This document has been linked to my index.html page, but how do i make it so that when i press my download button it executes this block of code, Thanks again – Bradley Aug 08 '14 at 12:37
I have now found out how to link this to the button, and when i press my download button i get this... Parse error: syntax error, unexpected 'skin' (T_STRING) in /Applications/XAMPP/xamppfiles/htdocs/download.php on line 7 – Bradley Aug 08 '14 at 13:00
to make it work. you link that php page to your button. for example if your page is download.php. you can try this .. this should work – MD Singh Aug 08 '14 at 14:10

score 0 · Answer 4 · answered Aug 08 '14 at 13:53

To host a file on the web server so that it can be directly downloaded to the users computer by pressing a button this is all the PHP which is needed:

 <?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;
?>

And for HTML:

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

When the HTML button named 'downloadbutton' is pressed by the user the a href detects this and looks for the source of the code to run next, in this case the root of the a href is the php document, so therefore it runs the PHP code and downloads the file of your choice directly to the users download file.

Thanks to every one who helped me, but this is what solved it for me in the end

score -1 · Answer 5 · answered Aug 08 '14 at 12:07

-1

this this:

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

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

}

answered Aug 08 '14 at 12:07

MD Singh

1,455
1
9
17

Thanks, but this strangely enough has pushed all the download buttons to the right not the centre – Bradley Aug 08 '14 at 12:10
thought it might be better to answer again. since there are two questions in one. – MD Singh Aug 08 '14 at 14:11

Positioning a HTML button within the centre of its parent div.

5 Answers5