Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Center Text in Div

Posted on 2015-01-21
2
Medium Priority
?
128 Views
Last Modified: 2015-01-22
I am sure there is a simple solution that I am missing, but I've stared at this too long and I can get it to work. You can view the active page at http://starofthesouth.org/. I am just trying to center the three links (redeem CE, attendee and exhibitor) on the page.

Code follows. Thanks in advance.

.home-page{
	float:left;
	width:100%;
	height:100%;
	background:url(images/background.jpg) top center no-repeat;
	background-size:100% 100%;
}

.home-contents-container{
	float:left;
	margin-left:2%;
	width:96%;
	height:100%;
	position:relative;
}

.contents-container{
	float:left;
	margin-left:2%;
	width:96%;
	position:relative;
}

.home-logo{
	float:left;
	width:100%;
	text-align:center;
	margin: 50px 0 5% 0;
}

.home-logo img{
	width:100%;
}

.home-center-body{
	width:100%;
    	margin: 0 auto!important;
	text-align:center!important;
}

.home-links {
	width: 100%;
	margin: 0 auto!important;
	text-align: center!important;
}

.home-center-body a{
	font-size:40px;
	color:#FFF;
	padding: 10px;
	border:1px solid #fff;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	text-transform:uppercase;
	letter-spacing:4px;
	float: left;
	margin: 0 0 0 15px;
}

Open in new window


<div class="main-container">
	<div class="home-page">
    	<div class="home-contents-container">
            <div class="home-logo">
            	<a href="<?php echo site_url(); ?>">
                	<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png"/> 
                </a>
            </div>
            
            <div class="home-center-body">

		<div class="home-links">

            	<?php
                $SQL = mysql_query("Select * from wp_posts where post_type = 'page' and post_parent = 0 and post_status = 'publish' order by menu_order ") or die(mysql_error());
				for ($i = 0; $i < mysql_num_rows($SQL); $i++){
				?>
                <a href="<?php echo get_permalink( mysql_result($SQL,$i,'ID') ); ?>">
                	<?php echo mysql_result($SQL,$i,'post_title');?>
                </a>
                <br/>
                <?php } ?>

		</div>

            </div>

Open in new window

0
Comment
Question by:43homes
2 Comments
 
LVL 3

Accepted Solution

by:
Marc Alonso earned 2000 total points
ID: 40563677
Remove the break tags <br/> from the HTML file:


            <div class="home-links">

                  <?php
                $SQL = mysql_query("Select * from wp_posts where post_type = 'page' and post_parent = 0 and post_status = 'publish' order by menu_order ") or die(mysql_error());
                        for ($i = 0; $i < mysql_num_rows($SQL); $i++){
                        ?>
                <a href="<?php echo get_permalink( mysql_result($SQL,$i,'ID') ); ?>">
                      <?php echo mysql_result($SQL,$i,'post_title');?>
                </a>
             <br/>    ***remove this line***
                <?php } ?>

            </div>

            </div>



Then in your CSS file, remove the "float: left" tag:


.home-center-body a{
      font-size:40px;
      color:#FFF;
      padding: 10px;
      border:1px solid #fff;
      border-radius: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      text-transform:uppercase;
      letter-spacing:4px;
      float: left;  ***remove this line***
      margin: 0 0 0 15px;
}
0
 

Author Closing Comment

by:43homes
ID: 40564088
Ugh! I knew it was something simple like that. Thank you!!!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

972 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question