Visit Jeremy's Blog.
Go Back > Forums > Non-*NIX Forums > Programming
User Name
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.


  Search this Thread
Old 05-11-2021, 04:41 PM   #1
Registered: Jun 2005
Location: Hayden, ID
Distribution: Ubuntu 20.04
Posts: 361

Rep: Reputation: 9
CCS3 - Can't get series of buttons to center in <div> box

I am stuck on how to get the series of buttons, as a group, to center in the gray box. See attachment. Any help appreciated in how to get this done. I know it is simple but I've got a brain blockage or something!!

Thanks R.


<div class="controls">

	<input type="button" name="next"  class="controls-input-connect hov"  id="next" value="Next" /> &nbsp; 
	<input type="button" name="prev"  class="controls-input-connect hov"  id="prev" value="Previous" />&nbsp;
	<input type="button" name="more"  class="controls-input-connect hov"  id="prev" value="More" onclick="window.location.href='healthConnect2.html'";/>&nbsp;	
	<input type="button" name="back"  class="controls-input-connect hov"  id="back" value="Go Back" onclick="window.location.href='healthFrontEnd.php'";/>&nbsp;
	<p id="clickmsg">Click on Id to Revise/Delete Record</p>

.controls {
	padding-top: 15px;
 	text-align: center;
	width: 500px;
	height: 30px;
	margin: auto;
	background-color: gray; /*#fff99d;*/      /*#d4ecff;*/
	font-size: 75%;

.controls-input-connect  {
	display: inline-table;
	  color: blue;
     text-align: center;
     width: 80px;
     height: 25px;
     font-size: 14px;
     font-weight: bold;		
Attached Thumbnails
Click image for larger version

Name:	cssCenterButtons.png
Views:	12
Size:	5.2 KB
ID:	36366  
Old 05-11-2021, 05:19 PM   #2
Senior Member
Registered: Feb 2007
Location: UK
Distribution: Debian
Posts: 1,339

Rep: Reputation: 1132Reputation: 1132Reputation: 1132Reputation: 1132Reputation: 1132Reputation: 1132Reputation: 1132Reputation: 1132Reputation: 1132

That screenshot does not reflect the code you've posted - there is more styles going on than you've included.

The code you've provided will give centered buttons (though I've no idea why you'd use inline-table instead of inline-block).

If you can't figure out what's going on using browser developer tools (F12), copy the page into a new single HTML file (with inline styles, and starting with "<!doctype html><meta charset=utf8 />" and gradually remove things until you've got the simplest code that you've verified still demonstrates the problem, then post that.



Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
[HTML|CSS] Move div with placeholder so that div in row above may overlap brianmcgee Programming 1 06-15-2011 01:08 PM
CSS: get div to expand with content Ephracis Programming 1 10-05-2009 11:50 AM
[SOLVED] When will CCS3 be a standard? Chronothread Programming 4 07-08-2009 03:29 PM
css div - fixed size + center placement Ephracis Programming 6 12-05-2008 05:54 PM
simplest way to center a <div> on the screen via css tanoatlq Programming 4 06-02-2008 02:50 AM > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 11:55 AM.

Main Menu
Write for LQ is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Open Source Consulting | Domain Registration