logo
down
shadow

Align Text of different size in row to bottom


Align Text of different size in row to bottom

By : Jocms
Date : November 21 2020, 04:01 AM
will be helpful for those in need I think you need to play around with the crossAxisAlignment and textBaseline properties of your Row widget.
Try something like this:
code :
Row(
    crossAxisAlignment: CrossAxisAlignment.baseline,
    textBaseline: TextBaseline.alphabetic,
    children: <Widget>[
      Text("foo", style: TextStyle(fontSize: 20)),
      Text("bar", style: TextStyle(fontSize: 13)),
    ],
),


Share : facebook icon twitter icon
How can I correctly align text of varying size along the bottom of a div?

How can I correctly align text of varying size along the bottom of a div?


By : Tintareanu George
Date : March 29 2020, 07:55 AM
wish helps you Avoid using position: absolute.
Use the position: relative to make the currency in the middle of the value:
code :
.currency {
  font-size:12px;
  font-weight: bold;
  position: relative;
  top:-10px;
}

.value {
  font-size:41px;
  font-weight: bold;
}
How can I align text to the bottom left of an image of unknown size?

How can I align text to the bottom left of an image of unknown size?


By : Alages
Date : March 29 2020, 07:55 AM
This might help you I have images on my page that are different sizes. I am trying to place text in the bottom left and right of the image that shows who uploaded it and how many favourites it has. There is currently text in the center. How can I get the text to be in the same place on each image? , This should get you started.
code :
#container {
    position: relative;
    height: 400px;
    width: 400px;
}

p {
    z-index: 100;
    position: absolute;    
    color: white;
    font-size: 24px;
    font-weight: bold;
    bottom: 5px;
}

#left {
    left: 20px;
}

#right {
    right: 20px;
}
<div id="container">
    <img src="http://www.noao.edu/image_gallery/images/d4/androa.jpg"/>
    <p id="left">Hello</p>
    <p id="right">World!</p>
</div>
Align text of different size to the bottom

Align text of different size to the bottom


By : sroughley
Date : March 29 2020, 07:55 AM
To fix the issue you can do As per @Johannes answer it's a good idea to wrap both text divs in another container. But you don't need an align-self: flex-end; declaration for the .inner-container, just add align-items: flex-end; to the parent div. That way, you get one CSS rule less.
display: inline;, like display: inline-block, makes items align themselves by their baselines (based on the item with the biggest height, in this case the .large text) so you could change the
and the
to spans instead of divs. Since the default display property of is inline, you can then skip the display declaration of .large and .small:
code :
.container {
  display: flex;
  height: 50px;
  background: pink;
  align-items: flex-end;
}

.large, .small {
  margin-right: 5px;
}

.large {
  font-size: 30px;
}

.small {
  font-size: 15px;
}
<div class="container">
  <div class="inner-container">
    <span class="large">Large</span>
    <span class="small">Small</span>
  </div>
</div>
centre align container div and align text to bottom of div

centre align container div and align text to bottom of div


By : Steve Manley
Date : March 29 2020, 07:55 AM
I hope this helps you . What I am trying to achieve: center a container div (that contains two divs) and in 2nd div, bottom align text
code :
.container{display:flex;}
.column1, .column2{
  width:200px;
 
  margin: 10px;
  border:solid 1px #ccc;
  flex-direction:column;
  
}
.column2{

justify-content:flex-end;
display:flex;
}
#img{
  max-width: 100%;

}
p{ margin:0;}
.container {
  width: 80%;
  padding-top: 100px;
  margin: 0 auto;

}
  <div class="container">
    <div class="img column1">
      <img id="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAADCCAMAAAB6zFdcAAAAdVBMVEXMzMwAAADPz8/S0tLU1NS4uLjDw8OMjIyrq6vHx8ezs7OmpqbBwcHX19dRUVGampp2dnavr69jY2OdnZ1eXl4aGhp+fn5sbGynp6dKSkp4eHg6Ojp/f39ERERmZmYhISEoKCgNDQ2Tk5NXV1cuLi43NzctLS2IdN5EAAAE4ElEQVR4nO3Ye3uqOBAHYCYJIILcrTfwAtrv/xF3wi1E291297T6PPt7/+jxoEYymSRDHAcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADgf0RIJsTdxYcPfLvZv23i37X5Q4QTpmWZJpF1h14TTK9VtucPbJ3v3bFwm+kLyks2ZZ4WjpyuuFVepkXwElGQxYUOZXsjWs7uR9TkDv8VUU3rtrzRefmdGxYBkRpfp0R1nh+Imv6ScEqiuDzQpZCfN/FbVEUbT0mlROjNrvJNDzEQ3nq9WPEn3AN9JwiynmIgd9QIJaUK9uT3fa4pUdymV9LzgyBC8oc7nWdBRtUYA1lSJPv338/qoYHPKJ/ehhiIgorhixzbSLdZ0aK7IkRL3mdN/BZxblePFz1K3SEGwh2HzhFLSr6aCBzFohliII/raawDKnQTtJmiSfsnJwKngfvYLRWf1HJ4Q77RtDjKw26WCPNl/35TcZx1vvLHGJQmf1Y8K3RiTLNK5fT15PoRMq+l7oHVB+mTK8cYqGs8jdM8Ho7ThuaNZmMPpirXuplhLvjT1zg9uPcyN4nB8fhgFH6Tuux5qXKLpHDUeCdd9ospD2a5ylljVkVxpMXwjkootWIgE/6gGGPg8NQaoiEOtdDLZTyNPf/alyfYz4goFBXR6Uy0m+oDvUSMMbBukS8uzP2uNkMQuMeVlc8i0gutiYEsqAyU4GCf17ogCNazNcAj/6kx4NTMDpR4vJkX62GM1UZn7hQDq9uRNWayDwJnwZs9peWhm2G+qQ+WByoTf0dpVxMF825bAXkCsaVz3a8FQlxJ/ytDysQsBtk8BgE18zHjTNjKhyxw1L6b//MYKA4Cy93ux+yhP2+eG4OQaKxWOesrqau7vb7zL8Wgy4SC3uw+8FfC7qtTDIRbU5oFUdFSrX/u1WKQTmOodjflqLruC6IvzAW24nryLgs4UH2bUwy4jdzRj0dCue8X7/XmQjHdjUwvAVd3/dL48ZpoJYXGawFt7Ris2vd+dvHeOJRf13aaFAGV0u529Pw1MTQxqMjLqAk8LVhQxq/03ph+vpfzWuCnFM7HkUd/OTThk8N/9Y+Yb0ldQMt6N98bi6fGQM9MU+ikF/18Z4kcdZvVSNW8RuqyoFK8j8yDoA52C1fJUTGd7ArTuxopem4M1Nn0UMU35S5GDSX8965WvsXzvJf9pmgHQSzHFrKU+HVXK5nviITjatfKl2fXytU0ClzY8AIvBrpW7o6W5s9MW2tJVI3eSJyHIIx4bVnpIpyXlq05TDnqhTKg47hleE9/ZuLJEPdFslDtPNGnWpmL+/HZWZxOs9sVzVQa6SA85rPZFw6ncQOWWbe8cOizfu+QL/DszGXszl0ptXJjqx8mBryKX0LFn1jenaFcTV2gNrfHhDYxcOkcyu4Mxae6v1RTI7nRqH2BMxSuC9d0jeMznTLrPNHEQAQ7WsfxO53uHvDEhy/NNVMjeTE/j5Tllcwmc6TLrr0Rh/dP9eQ/EGKR5se3xd0Zb1CYmSGXVV7u7z/xj1yz6Sk32eT5vghmZ6r+sUzDb57T/piPT7n/wDm4dcjycLYuXuhsHQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4Nf8BZyMMUIZKGmqAAAAAElFTkSuQmCC">
    </div>
    <div class="comment column2">
      <p>a paragraph</p>
      <p>another paragraph</p>
       <p>another paragraph</p> <p>another paragraph</p>
    </div>
  </div>
Trying to center and bottom an image inside a div using bottom: 0 and text-align: center sends it to the bottom corner o

Trying to center and bottom an image inside a div using bottom: 0 and text-align: center sends it to the bottom corner o


By : user3046687
Date : March 29 2020, 07:55 AM
wish helps you In your case just add transform: translate(-100%); to .mountain class It will align the .mountain class item(img) in center. Because text-align:center won't work if the position of the element is absolute.
Run the below snippet and check it.
code :
body{
  margin: 0;
  font-family: "Bebas W05 Regular",arial, sans-serif;
  text-align: center;
  letter-spacing: 1px;
  word-spacing: 3px;
}

.top-container{
    background-color: #f67280;
    position: relative;
    padding:100px;
    height: 300px;
}

.mountain {
  bottom: 0;
  position: absolute;
  transform: translate(-100%);

}
<body>
<div class="top-container">
  <img class="top-cloud" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img"  height="100" width="100">
  <h1>I´m Andres</h1>
  <p>A JAVA <span class="pro">pro</span>grammer and full stack web developer</p>
  <img class="bottom-cloud" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img"  height="100" width="100">
  <img class="mountain" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img"  height="100" width="100">
</div>
</body>
img{
display:block;
 margin:auto;
}
body{
  margin: 0;
  font-family: "Bebas W05 Regular",arial, sans-serif;
  letter-spacing: 1px;
  text-align:center;
  word-spacing: 3px;
}

.top-container{
    background-color: #f67280;
    padding: 100px;
    height: auto;
}

img{
display:block;
margin:auto;
}
<body>
<div class="top-container">
  <img class="top-cloud" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img"  height="100" width="100">
  <h1>I´m Andres</h1>
  <p>A JAVA <span class="pro">pro</span>grammer and full stack web developer</p>
  <img class="bottom-cloud" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img"  height="100" width="100">
  <img class="mountain" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img"  height="100" width="100">
</div>
</body>
body{
  margin: 0;
  font-family: "Bebas W05 Regular",arial, sans-serif;
  letter-spacing: 1px;
  word-spacing: 3px;
}
.top-container{
    background-color: #f67280;
    padding: 100px;   
    display:flex;
    align-items:center;
    flex-direction:column;
    height: auto;
}
<body>
<div class="top-container">
  <img class="top-cloud" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img" height="100" width="100">
  <h1>I´m Andres</h1>
  <p>A JAVA <span class="pro">pro</span>grammer and full stack web developer</p>
  <img class="mountain" src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img" height="100" width="100">  
  
    <img  src="https://www.pinclipart.com/picdir/middle/7-77046_mountain-clipart-simple-mountain-clipart-transparent-background-png.png" alt="cloud-img" height="100" width="100"/>  
</div>
</body>
Related Posts Related Posts :
  • Change state of widget outside State class
  • Flutter check if app is running in iPad or iPhone
  • NoSuchMethod in dart?
  • Getting the value from a custom input widget
  • How can I get rid of the animation on the InkWell widget?
  • How to conditionally add an error to an Observable in RxDart?
  • Missing concrete implementation of Getter and Setter
  • How to add ripple effect to PhysicalModel in flutter
  • Dart mapping Function as constructor with node interop
  • In the Flutter what is best way to add package in pubspec.yaml file?
  • Does Dart have import alias?
  • Do I have to deserialize the whole complex json file (with many nested arrays and objects) when I need only one object?
  • changing values when navigating with fluro
  • Get Variables name by it's value in Dart Lang
  • Dynamic AppBar of Flutter
  • Unable to serve angular components with simple Dart web server
  • error: The argument type '(File) → Future<dynamic>' can't be assigned to the parameter type '(dynamic) → FutureOr&
  • How to get progress event while uploading file on http.MultipartRequest request in flutter
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org