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

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 624
  • Last Modified:

Different text alignment on same line via CSS

I am trying to display text on the same line that has 2 different types of alignment (see image below).  I want to display a word that is displayed in the center of the page and on the same line display a word that is right aligned.  Is this possible to do?  If so what is the style that I would use?

Example of desired text display
0
WestCoast_BC
Asked:
WestCoast_BC
1 Solution
 
AeridenCommented:
This is what I do, CSS-wise (adjust the margin-bottom value based on the text size and other layout):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Test Page</title>
<style type="text/css">
div.style1 { text-align: center; margin-bottom: -20px}
div.style2 { text-align: right; }
</style>
</head>

<body>
<div class="style1">center</div><div class="style2">right</div>

</body>

</html>
0
 
WestCoast_BCAuthor Commented:
Thanks, this works.  I was doing what you suggested except I was missing the margin-bottom part.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now