logo
Tags down

shadow

text align attribute css


By : T.Luo
Date : May 04 2020, 11:49 AM

I try to align text on the right of my div element, but it's not working. I've tried text-align: right and width: 100% but this not seems to solve the problem.
I think that all the problem is into the left-side and the right-side attributes, but I can't figure out what the problem is...
Here is my HTML code :

.left-block {
  width: 50%;
  height: 450px;
  display: inline-block;
  padding-left: 1%;
  padding-right: 1%;
}

.selected-file {
  color: #12073C;
  font-size: 25px;
  font-weight: 700;
  padding-right: 2%;
  padding-left: 3%;
}

.left-side {
  text-align: left;
}

.right-side {
  text-align: right;
  color: red;
}

.small-title {
  font-weight: bold;
  font-size: 20px;
  padding-left: 2%;
  margin-bottom: 1.5%;
}
<div className="left-block">
  <div className="file-informations">
    <div className="small-title">File Information</div>

    <div className="file-values">
      <span className="left-side">File Size</span>
      <span className="right-side"><b>{this.humanFileSize(this.state.fileSize)}</b></span><br/> File category <b>{this.state.type}</b><br/>
    </div>
  </div>

  <div className="merging-informations">
    <div className="small-title">
      Merging statistics
    </div>

    <div className="merging-values">
      <b>Primary Key</b> <br/> o/w New Lease <br/> o/w New Well <br/> o/w Existing <br/>
      <b>o/w Conflicted</b> <br/> o/w Distric Name <br/> o/w Field2 <br/> o/w Field3 <br/>
    </div>
  </div>

</div>

Answer :

span tag elements are inline – which means they can't use text-align left or right.

You should look into either using floats:

.file-values {
  overflow: hidden;
}

.left-side {
  float: left;
}

.right-side {
  float: right;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/float

Or look into using Flexbox on the container, I think something as simple as:

.file-values {
  display: flex;
}

Would begin to get the layout you are looking  for.



Share : facebook icon twitter icon
Related Posts Related Posts :
  • clear array after form submit
  • pass url variable to javascript
  • access data using api
  • div position fixed css
  • add horizontal line between two div
  • disable toggle button css
  • css fixed line height
  • background image not working
  • table cell border
  • text line break css
  • overlay div on div
  • text direction rtl css
  • javascript convert string to an object
  • bind inner div click to outer div
  • jquery ajax oncomplete
  • how to use promise in for loop
  • jquery get element using variable
  • javascript send textbox value
  • pass div class content to another class or id
  • css new line after element
  • css calc not working properly
  • link disabled jquery
  • sql join table to subquery
  • MS Access SQL Issue with OR AND Operators
  • set textarea value using php
  • php merge two arrays into one
  • php form with google captcha
  • update current row in php
  • php date format mysql
  • mysql pdo select query
  • php function return an array
  • PHP mysqldump database to sql file
  • display image query
  • php create array using foreach loop
  • associative array php
  • group_concat in mysql laravel
  • php array_push empty
  • mysql on update cascade not working
  • pdo insert prepared statement
  • mysql insert ignore vs on duplicate key
  • mysql insert into existing row
  • mysql multi insert query
  • mysql group by show all rows
  • php change profile image
  • combine multiple arrays into one array php
  • how to sum values in an array
  • how to get sum of the total time
  • How to Create Facebook live stream without notification using API ?
  • on button click make div visible
  • css affect another element on hover
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org