This question already has answers here:
Vertically align text next to an image?
(26 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 2 years ago.
I'm having issues with my 2 child elements both being affected from styles applied to each other. I'm just trying to line up the one with the other better vertically.
I pretty much just went to move the img down a few pixels to line up with the content. Any css thing I'm missing here?
<div id='fileIcon' class='fileIcon'>
<img src='images/Google-Chrome-Logo.svg' class="iconImg"></img>
<p id='fileName'>TestingFileName.pdf</p>
</div>
.fileIcon {
text-align: center;
overflow: auto;
}
.iconImg {
display: inline-block;
z-index: 1;
width: 22px;
height: 22px;
padding: 0px 5px;
}
#fileName {
display: inline-block;
z-index: 1;
color: #999;
font-size: 1.1em;
margin: 0;
}
Add vertical-align: middle to your image (and forget about </img> closing tag)
.fileIcon {
text-align: center;
overflow: auto;
}
.iconImg {
display: inline-block;
z-index: 1;
width: 22px;
height: 22px;
padding: 0px 5px;
vertical-align: middle;
}
#fileName {
display: inline-block;
z-index: 1;
color: #999;
font-size: 1.1em;
margin: 0;
}
<div id='fileIcon' class='fileIcon'>
<img src='' class="iconImg">
<p id='fileName'>TestingFileName.pdf</p>
</div>
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 1 year ago.
CodeSandbox:
https://codesandbox.io/s/eloquent-haibt-1bnib?file=/src/main.js
I want to center the - text in the button, but I cannot find a way to do it.
html
<button class="round-button align-middle mr-1">
<span>-</span>
</button>
css
.round-button {
min-width: 20px;
max-height: 20px;
text-decoration: none;
display: inline-block;
outline: none;
cursor: pointer;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 100%;
overflow: none;
text-align: center;
padding: 0;
}
.round-button:before {
content: "";
display: inline-block;
vertical-align: middle;
}
html
<button class="round-button align-middle mr-1">-</button>
css
.round-button {
min-width: 20px;
height: 20px;
border-style: none;
color: white;
background-color: #3498db;
border-radius: 50%;
text-align: center;
padding: 0;
line-height: 20px; // to center text vertically
}
You just need to add the same line-height as your button's height and don't need an extra span element to add text. I've also removed unnecessary styles.
Try setting line-height: 20px to that. If it still looks off, you might be using a custom font with non-standard line height. In this case play with the line-height property until it looks okay.
Add the following style properties to .round-button:
.round-button {
display: flex;
align-items: center;
justify-content: center;
}
And, remove style for .round-button:before.
Try this.
.round-button {
background-color: #3498db;
border-style: none;
border-radius: 100%;
color: #fff;
cursor: pointer;
aspect-ratio: 1 / 1;
width: 48px;
display: flex;
align-items: center;
justify-content: center;
}
<button class="round-button">
<span>-</span>
</button>
Try changing <span>-</span> to <span style="position:relative; left:0px; top:-3px">-</span>. If it doesn't look right you can play around with it.
This question already has answers here:
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 2 years ago.
I want to add a decent line around my title
for example
------ Title ------
but I want the line be continued and decent
is there any library or CSS I can use for this requirement?
You before in css like this:
.wrapper{
width: 25%;
}
span {
display: block;
margin-bottom: 15px;
position: relative;
text-align:center;
}
span:before {
content: "";
top: 8px;
left: 0;
width: 100%;
height: 2px;
background-color: #d6dde4;
display: inline-block;
position: absolute;
}
span b {
background-color: #fff;
padding: 0 10px;
font-size: 14px;
color: #39335b;
position: relative;
display: inline-block;
}
<div class="wrapper">
<span>
<b> title</b>
</span>
</div>
This question already has answers here:
What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
(4 answers)
What is the default padding and/or margin for a p element (reset css)?
(5 answers)
Closed 2 years ago.
I've coded a blog website which is functioning absolutely fine and doing what I want it to - I'd say I'm about average with CSS, but for the life of me I can't figure out why there's a huge gap between my blog title and summary / date posted below it. I want them to essentially have no margin or gap between them, but obviously not be overflowing.
However, whenever I set the margin to 0, it doesn't reduce the gap. I've tried playing with sizes, but on the whole I want to keep them auto height sized where possible for mobile responsiveness, and reducing code.
Here's an example:
h1 {
font-size: 8rem;
letter-spacing: 0.5px;
color: #ff4766;
}
h2 {
font-size: 3rem;
letter-spacing: 0.5px;
color: ##ff4766;
}
h3 {
font-size: 2rem;
letter-spacing: 0.5px;
color: #ff4766;
}
h4 {
color: #fff;
}
p {
font-size: 1rem;
letter-spacing: 0.5px;
color: #fff;
}
a {
font-size: 0.8rem;
letter-spacing: 0.5px;
text-decoration: none;
color: #fff;
}
body {
margin: 0;
padding: 0;
font-family: 'Helvetica', sans-serif;
box-sizing: border-box;
background-color: #3b353a;
}
.homepage-blog-section {
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.homepage-blog-container {
height: 90%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.homepage-blog-post {
height: auto;
width: 50%;
display: flex;
align-items: center;
flex-direction: column;
margin: 40px 0;
}
.homepage-blog-title {
height: auto;
width: 100%;
}
.homepage-blog-details {
height: auto;
width: 100%;
}
.homepage-blog-details p {
color: #f9f9f9;
font-style: italic;
font-weight: 200;
font-size: 0.8rem;
}
<section class="homepage-blog-section">
<div class="homepage-blog-container">
<div class="homepage-blog-post">
<div class="homepage-blog-title">
<a href="">
<h3>
Show
</h3>
</a>
</div>
<div class="homepage-blog-details">
<p>
Test summary
</p>
<p>
Test date
</p>
</div>
</div>
</div>
</section>
As you can see when you run that code there's a big gap between the title and the summary/date below it. I've considered putting them into the same div, but to be honest I don't massively want to do that - and it doesn't work exactly how I was hoping.
I'm wanting there to be a similar gap between the title and summary, as there is with the summary and date. I've tried minus margins but that breaks down eventually on smaller devices - and like I said, hoping to keep this code as clean as possible without it being too fiddly.
Is there something obvious I'm missing??
I am dealing with text blocks (background blocks over text) and face some issues with paddings on new line. The problem occurs when the browser(e.g. mobile) cuts the text into to two lines due to lack of width. text then looks like this:
I don't really know how to set a padding css on the end of the new lines, since it could break up anywhere of the sentence. You could say put a span on it with padding, but it is not fixed where the line will break down. It depends on the width. Any recommendations?
You could apply display: inline-block but that will turn the background color into an ugly box which doesn't look as nice as having an exact width background for each line. Unfortunately CSS doesn't let us target individual lines except for the first one.
If you don't mind getting a little "creative" (or hacky) you could wrap each word in its own element in the backend or using JavaScript and apply the background color to those elements. Adjust the parent's word-spacing accordingly to eliminate gaps.
.main {
font-family: sans-serif;
font-weight: bold;
background-color: #99c;
display: flex;
height: 400px;
flex-direction: row;
align-items: center;
}
.text-container {
max-width: 500px;
display: inline-block;
word-spacing: -15px;
position: relative;
padding-left: 20px;
overflow: hidden;
}
.text-container::before {
content: '';
background-color: black;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 100%;
z-index: 1;
}
span {
font-size: 36px;
line-height: 1.5em;
color: white;
background-color: black;
padding: 0.25em 0.5em 0.25em 0;
max-width: 360px;
}
<div class="main">
<div class="text-container">
<span>A</span> <span>Movie</span> <span>in</span> <span>the</span> <span>park:</span> <span>Kung</span> <span>Fu</span> <span>Panda</span>
</div>
</div>
You can use box-shadow for this issue and display inline:
<div class="text">
<span class="text-container">A Movie in the park: Kung Fu Panda</span>
</div>
And css:
.text > span {
display: inline;
box-shadow: 25px 0 0 black, -10px 0 0 black;
background-color: black;
color: white;
}
Try to add after "Park:" and before "Kung"
padding workded!!!
change width by console browser and see result:
h1{
background-color: #ff6a6a;
padding: 33px;
display: inline-block;
word-wrap: break-word;
width:300px
}
<h1>rert ert erttttttttttttttt 00000000000000000000 dfgdfgd dfgdfgdft ertert </h1>
Use <p> tag to wrap up the text and it apparently works demo
<div class="main">
<div class="text-container">
<p id="test">A Movie in the park: Kung Fu Panda</p>
</div>
</div>
css
.main {
font-family: sans-serif;
font-weight: bold;
background-color: #99c;
display: flex;
height: 400px;
flex-direction: row;
align-items: center;
}
.text-container {
max-width: 400px;
}
p {
font-size: 36px;
line-height: 2em;
color: white;
background-color: black;
padding: 0.5em;
max-width: 360px;
}
Given the following html:
<div class="body">
<div class="banner">
<div class="name">
<h2>
<a href="http://www.example.com">
<span class="bold">Test Link</span><br/>
</a>
</h2>
</div>
<div class="title">
<h3>A Connections Learning Partner Program</h3>
<p>Quality online learning for high school students in Oakland County and surrounding counties.
</p>
</div>
<div class="link">
Learn More
</div>
</div>
</div>
How can I vertically align .link a (the button) within .link without giving a height or width? Like this...
Here's my fiddle
Here is one way that you can do it. Your HTML is good, no need to change anything.
For the CSS:
.body { width: 920px; }
.banner {
background-color: #454545;
border-bottom: 3px solid #F9F9F9;
height: 100px;
margin: 0 0 5px;
padding: 0;
display: table;
}
.banner > div {
outline: 1px dotted yellow; /* optional to show cell edges... */
display: table-cell;
}
.banner .name {
width: 25%;
vertical-align: top;
padding-top: 25px; /* control top white space */
text-align: center;
}
.banner .name h2 {
color: #F9F9F9;
max-height: 55px;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.banner .title {
width: 50%;
vertical-align: top;
padding-top: 25px;
}
.banner .title h3 {
font-size: 15px;
font-weight: bold;
line-height: 15px;
margin: 0px 0 0 0;
padding: 0;
}
.banner .title p {
font-size: 12px;
max-height: 35px;
overflow: hidden;
margin: 0;
padding: 0;
}
.banner .link {
width: 25%;
vertical-align: middle;
text-align: left; /* set to left, center or right as needed */
}
.banner .link a {
margin-left: 25px; /* controls left offset */
background-color: #FA9800;
border-radius: 5px 5px 5px 5px;
cursor: pointer;
display: inline-block; /* use inline-block if you want to center element */
font-size: 12px;
font-weight: bold;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
width: 100px;
}
See the fiddle at: http://jsfiddle.net/audetwebdesign/jsG8F/
How This Works
The trick is to use display: table on your .banner container and then display: table-cell on your child div elements, and set the % widths to 25%, 50%, 25% respectively for .name, .title, .link.
You can then use vertical-align and text-align to control vertical and horizontal placement of the various text blocks.
I added comments related to using padding-top to control white space from the top of the banner.
For the .link a element, you can adjust the left margin (or right) as needed.
These CSS rules offer you a lot of fine control over the placement of the various elements within the banner.
Backwards Compatibility
The display: table-cell property is backwards compatible back to IE8.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display
If the size of the element and banner are fixed, use margin-top to offset the element.
Marc Audet was very close but I ended up going a slightly different route.
I gave .link a a fixed top margin and made margin-left: auto; and margin-right: auto; and that did the trick.
Here is the fiddle for reference.