Is it possible to place text in html left and right
I want it to place the text left and right on the same line.
My HTML code:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RPG Clicker</title>
<link rel="stylesheet" type="text/css" href="interface.css" />
</head>
<body>
<left>Level: <span id="level">1</span></left>
<right>Gon level: <span id="gon">0</span></right>
</body>
</html>
Demo
There is no <left> or <right> tag in html.
To achieve what you want to do, you will have to do it with CSS.
.align-left {
float: left;
width:33%;
}
.align-center {
text-align: center;
display: inline-block;
width:34%;
}
.align-right {
float: right;
text-align: right;
width:33%;
}
<html>
<head>
</head>
<body>
<span class="align-left">Level: <span id="level">1</span></span>
<span class="align-center">Text</span>
<span class="align-right">Gon level: <span id="gon">0</span></span>
</body>
</html>
HTML
<div id="textbox">
<p class="alignleft">Text on the left.</p>
<p class="alignright">Text on the right.</p>
</div>
CSS
.alignleft {
float: left;
}
.alignright {
float: right;
}
SOURCE:Left Align and Right Align Text on the Same Line
Try following :
<span style="float:right">Right</span>
<span style="float:left">Left</span>
You can use either:
a table with one row and two columns, the left one left-aligned, the right one right-aligned;
a CSS grid system with a "row" and two "columns": right-align the second column (see eg. Bootstrap;
a div with float: right; text-align: right; that you place before your left-aligned content.
try using this:
<left style="float:left">Level: <span id="level">1</span></left>
<center style="
float: left;
position: relative;
left: 45%;
">Text</center>
<right style="float:right">Gon level: <span id="gon">0</span></right>
you can get more info about floats and position from w3schools.com
Related
I used text-align:center to center the three divisions, but they are all aligned on the left.
I was told that because these three elements are all block, so they wouldn't center.However, I tried to add display:inline-block, but when I inspected the page, it still showed me display:block.
Here's my code:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.Google-logo {
width: 250px;
}
.Google-search-box {
font-size: 13px;
padding-left: 15px;
height: 30px;
width: 460px;
border-radius: 15px;
border-style: solid;
border-color: rgb(160, 157, 157);
box-shadow: 0 1px 6px rgb(183, 181, 181);
margin-top: 15px;
}
.div {
text-align: center;
}
</style>
</head>
<body>
<div>
<img
class="Google-logo"
src="images/Google_2015_logo.svg.png"
alt="Google logo"
/>
</div>
<div>
<input
class="Google-search-box"
type="text"
placeholder="Search Google or type a URL"
/>
</div>
<div>
<button class="left-button">Google Search</button>
<button class="right-button">I'm Feeling Lucky</button>
</div>
</body>
</html>
Very simple,
div is not a class, is a html element, so do this;
CSS
div {
text-align: center;
}
You can do it in multiple ways, the simplest and the first way is to write a CSS like:
div {
text-align: center
}
The second way if you want to use a inline CSS in your HTML code itself:
<div style="text-align:center">
The third way is what you were trying to do by using classes/id for that you need to change both your HTML and CSS code:
*for class
HTML:
<div class="center"> </div>
CSS:
.center {
text-align: center,
}
*for id
HTML:
<div id="center"> </div>
CSS:
#center {
text-align: center,
}
And most importantly div is not a class it's an HTML tag so your code didn't work because you used
.div {
text-align: center,
}
in your CSS code and the . symbolizes a class whereas if you had written it like this it would have worked as it would have given the text center to all the divs present in your code
div {
text-align: center,
}
But I feel you should use classes and center the text in div so that it could be specific to the div you wanna center texts for so try to prioritize the second or third way over the first one.
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 1 year ago.
body {
font-family: Avenir;
}
img {
width: 70%;
height: 75%;
float: left;
margin-right: 10px;
cursor: pointer;
}
a {
color: grey;
}
a:hover {
color: black;
}
.title {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>☕️Arrexi's Cafe☕️</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>☕️Arrexi's Cafe☕️</h1>
<div id="body">
<h1 class="title">About Us
<hr>
</h1>
<img src="https://dummyimage.com/600x400/000/fff" alt="Arrexi's Cafe!">
<article id="description">Hello! Welcome to the website of <b>Arrexi's Cafe</b>!<br><br>We are a friendly community which is with many fun bots and an active chat. You can surely chill in our server! Join us now!</article>
<h1 class="title">Feedback</h1>
<hr>
<h3>Have joined our server, and want to give some feedback?</h3>
Enter your suggestion in the following box then press "Submit"!
<br>
<textarea id="feedback"></textarea>
<button onclick="submit()">Submit</button>
</div>
<script src="script.js"></script>
</body>
</html>
I used these HTML codes to try to make a website, but I want the section of the feedback be under the image.
I want the result be
instead of
Can anyone tell me how to do it?
I currently used some <br>s and a character to simulate the result that I want
What youre looking for is a so called clearfix:
What is a clearfix?
Whats happening?
By using float:left youre actually changing the text float - beginning at the point where you set float.
To restore the regular blockish behaviour you need to clear the float again.
body {
font-family: Avenir;
}
img {
width: 70%;
height: 75%;
float: left;
margin-right: 10px;
cursor: pointer;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
a {
color: grey;
}
a:hover {
color: black;
}
.title {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>☕️Arrexi's Cafe☕️</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>☕️Arrexi's Cafe☕️</h1>
<div id="body">
<div class="clearfix">
<h1 class="title">About Us
<hr>
</h1>
<img src="https://dummyimage.com/300x200/000/fff" alt="Arrexi's Cafe!">
<article id="description">Hello! Welcome to the website of <b>Arrexi's Cafe</b>!<br><br>We are a friendly community which is with many fun bots and an active chat. You can surely chill in our server! Join us now!</article>
</div>
<h1 class="title">Feedback</h1>
<hr>
<h3>Have joined our server, and want to give some feedback?</h3>
Enter your suggestion in the following box then press "Submit"!
<br>
<textarea id="feedback"></textarea>
<button onclick="submit()">Submit</button>
</div>
<script src="script.js"></script>
</body>
</html>
I wrapped your whole upper part into a div with the clearfix class.
Inside that div you change the float behaviour by using float:left on the image.
By adding the clearfix to the div, there will be a after Element which sets clear:both which basically restores regular behaviour so everything after that doesnt float anymore.
Fore more information and some live examples see https://www.w3schools.com/css/css_float.asp, https://www.w3schools.com/css/css_float_clear.asp and https://www.w3schools.com/css/css_float_examples.asp.
h1 {
text-align: center;
}
p {
font-family: verdana;
}
<h1>Taxes</h1>
<p>Gross Income: <span style="text-align:right;">$250, 000.00</span></p>
Let's say I want to display Gross Income: on the left side and $250, 000.00 on the right side of the page (both will need to be on the same line).
How would I go about doing this? Current code does not work.
Use float <span style="float:right;"> .
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
p {
font-family: verdana;
}
</style>
</head>
<body>
<h1>Taxes</h1>
<p>Gross Income: <span style="float:right;">$250, 000.00</span></p>
</body>
</html>
One of the more modern ways of laying out a website is with flexbox. You can specify display: flex in the parent container and set the flex proportion in the child containers. Something like this should work:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
div.total {
font-family: verdana;
display: flex;
}
div.total div {
flex: 1;
}
</style>
</head>
<body>
<h1>Taxes</h1>
<div class="total">
<div>Gross Income:</div>
<div style="text-align: right">$250, 000.00</div>
</div>
</body>
</html>
Also, do not use a <p> tag unless it actually is a paragraph.
You can check out caniuse.com to see browser compatibility with flexbox.
The problem that I have with my code is that the <p>Welcome to my Profile</p> will not center. I've tried using Bootstrap's text-center class but it doesn't work desirably. I've also tried multiple things like using text-align: center; in CSS and even using width: 100%; for both the header and the div. Are there any solutions? Thanks in advance.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jane's Personal Profile</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Jane Doe</h1>
<ul>
<li>Social Media</li>
<li>Portfolio</li>
</ul>
</header>
<div class="row">
<div class="span8 offset2 text-center">
<p>Welcome to my Profile</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
header {
height: 75px;
padding-left: 10px;
box-shadow: 5px 5px 10px grey;
width: 100%;
}
header > h1 {
float: left;
}
ul {
display: table-row;
float: right;
list-style: none;
}
ul > li {
display: table-cell;
vertical-align: middle;
height: 70px;
padding: 10px;
padding-right: 20px;
font-size: 16px;
}
h1 {
font-family: 'Abril Fatface', cursive;
}
Looks like you're using "text-center" as a class. Unless you set your CSS to recognize the class, there is nothing for the CSS to do.
Try adding this to your CSS
.text-center {
text-align: center;
}
You should always provide a jsFiddle for problems like this, btw ;)
If Bootstrap has a class setting the paragraph element to align left, you may also need to change the paragraph to a div. Alternatively, you could add a class to the paragraph such as "center-me" and add CSS
p.center-me {
text-align: center;
}
Bootstrap adds a giant bunch of CSS. Make sure, when you are using Bootstrap, to check if it has CSS styles that are affecting what you want to accomplish. Most browsers contain a developer's window where you can see what styles are being applied to any window. In Chrome, you can right click on any element and select "Inspect" to pull up this window and see both the HTML and the styles that are being applied from any CSS source.
How do i left and right align text on multiple lines, e.g.:
┌─────────────────────────────────────┐
│ Tums 29 │
│ Oxydativedecarboxilization ATP │
│ appdata C:\Users\Ian\AppData\Local │
└─────────────────────────────────────┘
e.g.:
Note: A single-line variant of this question has been asked before
Here's a sample of some attempts i've found on SO and elsewhere, and the situations where left+right align was tried:
<!DOCTYPE html>
<HTML>
<HEAD>
<HEAD>
<TITLE>Home Page</TITLE>
<STYLE type="text/css">
.left {
float: left;
}
.right {
float: right;
}
</STYLE>
</HEAD>
<BODY>
<DIV>
<P><SPAN class='left'>Tums</SPAN><SPAN class='right'>29</SPAN>
<P><SPAN class='left'>Oxydativedecarboxilization</SPAN><SPAN class='right'>42</SPAN>
<P><SPAN class='left'>appdata</SPAN><SPAN class='right'>C:\Users\Ian\AppData\Local</SPAN>
</DIV>
<UL>
<LI class='line1'><P class='left'>Tums<P class='right'>29
<LI class='line2'><P class='left'>Oxydativedecarboxilization<P class='right'>42
<LI class='line3'><P class='left'>appdata<P class='right'>C:\Users\Ian\AppData\Local
</UL>
<DIV>
<P class='left'>Tums<P class='right'>29
<P class='left'>Oxydativedecarboxilization<P class='right'>42
<P class='left'>appdata<P class='right'>C:\Users\Ian\AppData\Local
</DIV>
</BODY>
</HTML>
Which renders incorrectly as:
Desired rendering:
Bonus reading
HTML/CSS - Right and left align on the same line?
Cross-browser CSS for left align and right align on the same line
You just have to clear your floats. http://jsfiddle.net/P7KuB/2/
<div>
<p><span class='left'>Tums</span><span class='right'>29</span></p>
<p><span class='left'>Oxydativedecarboxilization</span><span class='right'>42</span></p>
<p><span class='left'>appdata</span><span class='right'>C:\Users\Ian\AppData\Local</span></p>
.left { float: left; }
.right { float: right; }
p { overflow: hidden; }
.wrap { clear:both; }
<DIV>
<P class="wrap"><SPAN class='left'>Tums</SPAN><SPAN class='right'>29</SPAN>
<P class="wrap"><SPAN class='left'>Oxydativedecarboxilization</SPAN><SPAN class='right'>42</SPAN>
<P class="wrap"><SPAN class='left'>appdata</SPAN><SPAN class='right'>C:\Users\Ian\AppData\Local</SPAN>
</DIV>
See: http://jsfiddle.net/thirtydot/HkybR/2/
HTML:
<div class="info">
<div>
<span class="left">Tums</span><span class="right">29</span>
</div>
<div>
<span class="left">Oxydativedecarboxilization</span><span class="right">ATP</span>
</div>
<div>
<span class="left">appdata</span><span class="right">C:\Users\Ian\AppData\Local</span>
</div>
</div>
Could probably be more semantic.
CSS:
.info {
margin: 16px;
padding: 8px;
background: #fff;
float: left;
font-size: 21px;
clear: both;
}
.info > div {
overflow: hidden;
text-align: right;
}
.info .left {
float: left;
padding-right: 10px;
}
<UL style="list-style-type: none;">
<LI class='line1'>Tums<div class='right'>29</div></LI>
<LI class='line2'>Oxydativedecarboxilization<div class='right'>42</div></LI>
<LI class='line3'>appdata<div class='right'>C:\Users\Ian\AppData\Local</div></LI>
</UL>
Renders as...
You may also need to change the margins of the UL element.
EDIT: I guess the clear method is a more elegant solution!
Your test case was way too complicated. Here is a working multi-line version:
<!DOCTYPE html>
<HTML>
<HEAD>
<HEAD>
<TITLE>Home Page</TITLE>
<STYLE type="text/css">
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear:both;
}
</STYLE>
</HEAD>
<BODY>
<DIV>
<P class="left clear">Left</P>
<P class="right">Right</P>
<P class="left clear">Left</P>
<P class="right">Right</P>
<P class="left clear">Left</P>
<P class="right">RightRightRightRightRightRight RightRight RightRight RightRight</P>
</DIV>
</BODY>
</HTML>
CSS add
p, li { overflow:hidden; }
Example : http://jsbin.com/asulih/