I display text after image with css:before
How can I align vertically the text, specially when there are multiple lines of text ?
See my snippet
.link-container {
vertical-align: middle;
}
.link-container:before {
vertical-align: inherit;
content: url("http://via.placeholder.com/50x50");
padding-right: 20px;
}
<p class="link-container">
<a class="text-download" href="#">Link#1</a>
</p>
<p class="link-container">
<a class="text-download" href="#">Link#2</a><br>
<a class="text-download" href="#">Link#3</a>
</p>
Use the image as background then you can easily center the content using flexbox for example:
.link-container {
padding-left: 55px;
min-height: 50px;
background: url("http://via.placeholder.com/50x50") left center/50px 50px no-repeat;
display:flex;
flex-direction:column;
justify-content:center;
}
<p class="link-container">
<a class="text-download" href="#">Link#1</a>
</p>
<p class="link-container">
<a class="text-download" href="#">Link#2</a>
<a class="text-download" href="#">Link#3</a>
</p>
<p class="link-container">
<a class="text-download" href="#">Link#2</a>
<a class="text-download" href="#">Link#3</a>
<a class="text-download" href="#">Link#4</a>
</p>
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 1 year ago.
Problem: unable to horizontally center the image:
Please see the code example here:
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.index-img-container {
width: 200px;
height: 200px;
}
.index-img {
max-width: 100%;
max-height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="card ">
<div class="card-block m-1">
<a href="" target="_blank" class="nounderline">
<div class="index-img-container d-flex align-items-center justify-content-center">
<img class="index-img" src="https://picsum.photos/536/354">
</div>
<div class="card-body card-body-fix">
<div class="text-secondary font-italic">Title here</div>
<h6 class="card-title text-dark card-title-text">
Some text is shown here with The Lorem Ipsum for photos.
</h6>
<span class="text-space-no-wrap">
<span class="card-text text-danger">Important message</span>
<span class="card-text h5 text-secondary small"></span>
</span>
<br><span class="font-italic text-secondary small">+ Some note</span>
</div>
</a>
<a class="btn btn-info w-100" href="" target="_blank" role="button">View Details</a>
</div>
</div>
If I removed the css class "index-img-container", the image will be centered.
.index-img-container {
width: 200px;
height: 200px;
}
I am unable to understand how this size-defining class can cause the image to align to left. But in order to keep all images the same size this class cannot be removed. Is there a solution?
Thanks.
You could add auto margin to your class to encourage centering:
.index-img-container {
width: 200px;
height: 200px;
margin: auto;
}
I want to make a nav bar in the footer with images. The footer needs to be 10% of the total screen and the images need to be within those 10% as well. Only I don't get the images scale according to the screen size and are way bigger. What am I doing wrong?
I am using Bootstrap 4 and I intent to make a mobile version of my website but it is not displaying good.
<div class="footer navbar row">
<div class="col-sm-2 menu_item">
<a href="#home" class="active">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#news">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#contact">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#contact">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#contact">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: var(--primary-color-1);
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
margin: 0px;
height: 10vh;
}
/* Style the menu blocks */
.menu_item {
position: relative;
padding: 2px 10px;
margin: 0px;
}
/* Style the links inside the navigation bar */
.navbar a {
float: left;
display: block;
text-align: center;
text-decoration: none;
}
/* Style the images/icons of the links */
.menu_img {
height:100%;
width: 100%;
object-fit: cover;
}
responsive img's need width: 100%; to be responsive, you can control the image size with his container, for example:
<div class="img-container">
<img src="imgUrl"/>
</div>
img{
width: 100%;
}
.img-container{
width: 10%;
}
I found the solution. My structure is like
<div class="footer">
<div>
<a>
<img>
</a>
</div>
</div>
The footer div needs to be height:10%. But I need to set the height of all the other elements to 100%(which I didn't do before). Otherwise it will extend outside those. 'borders'
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 3 years ago.
I have a number of containers with the same width but different height. I would like them to stack-up without leaving too much space below.
Currently they have the following CSS:
.myDiv {
width: calc(100% - 67%);
float: left;
}
What else am I missing to accomplish this?
I recommend using grid or flexbox. This is a great example using flex: https://codepen.io/cssgirl/pen/NGKgrM
This is my favorite guide for learning flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here is a cleaned up version from the codepen link:
.container {
max-width: 1100px;
margin: 0 auto;
}
.cards {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 15px;
padding: 1.5%;
box-sizing: border-box;
}
.card {
flex: 0 1 330px;
position: relative;
margin-bottom: 20px;
padding-bottom: 30px;
background: #fefff9;
color: #363636;
text-decoration: none;
}
.card span {
display: block;
}
.card .card-summary {
padding: 5% 5% 3% 5%;
}
.card .card-header {
position: relative;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
.card .card-title {
background: rgba(157, 187, 63, .85);
padding: 3.5% 0 2.5% 0;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
position: absolute;
bottom: 0;
width: 100%;
}
.card .card-title h3 {
font-size: 1.2em;
line-height: 1.2;
padding: 0 3.5%;
margin: 0;
}
//General styles for page to make it prettier ;P
body {
background :#f0f0f0;
font-size: 17px;
line-height: 1.4;
font-family: 'Jaldi', sans-serif;
}
<html>
<body>
<div class="container">
<div class="cards">
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
A summary will also be present. Usually two to three brief sentences about the content on the detail page.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card that is a bit longer in length</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
A summary will also be present. Usually two to three brief sentences about the content on the detail page.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
A summary will also be present. Usually two to three brief sentences about the content on the detail page.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Each card is created from an <a> tag so the whole card is linked.
</span>
</a>
<a class="card" href="#">
<span class="card-header">
<span class="card-title">
<h3>This is a title for a card</h3>
</span>
</span>
<span class="card-summary">
Using Flexbox is such a an easy, well supported way for grid-style content, such as cards. The cards height will expand to match the longest item.
</span>
</a>
</div>
</div>
</body>
</html>
I am jumping into a large complex application today and it's a bit daunting.
So, I want to solve the issue locally then find where the solution should eventually be located.
I have square images that come from sources of various sizes. Currently the image fills the div regardless of its dimensions.
<li class="hint-li" data-position="undefined" data-id="551ef3279934asda2e2565" id="551efsfasd8354582e2565" style="background-image: url(http://s3.amazonaws.com/source/558dadasd9a0f3.616asd74.jpg);">
<div class="sold-out hidden">
</div>
<div class="partnered hidden">
</div>
<div class="overlay">
<div class="row">
<div class="col">
<strong>
Thermal bath, aromatherapy, massage
</strong>
<em>
Aire Ancient Bath
</em>
<strong class="hintPrice">
$181
</strong>
</div>
</div>
</div>
<div class="options">
<div class="row">
<div class="col">
<a target="_blank" class="buy" href="http://www.ancientbathsny.com/aire-services/thermal-bath-with-aromatherapy-and-relaxing-30-minutes-massage/">
Buy
</a>
<a target="_blank" class="hint">
Hint
</a>
</div>
<div class="col">
<ul>
<li>
<a class="twitter" target="_blank">
<span class="sprite twitter-alt">
</span>
</a>
</li>
<li>
<a class="facebook" target="_blank">
<span class="sprite facebook-alt">
</span>
</a>
</li>
<li>
<a class="email">
<span class="sprite email">
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
Here is the CSS that effects these image sizes:
.grid>ul>li {
width: 247px;
height: 250px;
background-position: center;
background-size: cover;
display: inline-block;
margin: 0 20px 20px 0;
position: relative;
vertical-align: top;
cursor: pointer;
-webkit-box-shadow: 1px 1px 1px 1px #ddd;
box-shadow: 1px 1px 1px 1px #ddd;
}
I'm trying to center the image within the div and have the remaining space be white space:
I have tried various approaches such as:
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
But it is breaking their format on the page.
How do I get the desired behavior?
As in this JS Fiddle these lines should be in your .grid>ul>li css:
background-position: center center;
background-repeat:no-repeat;
background-size: contain;
background-color:white;
EDIT: My answer is not actually applicable to OP, but I will leave it here in case someone is looking to center img elements as OP described in the title.
Wrap the following class around each img attribute:
.example-wrapper img {
text-align:center;
transform: translateY(-50%);
top: 50%;
height: auto;
max-width: 100%;
max-height:100%;
position: relative;
background-color: white;
}
extra option: "text-align:center;" above can be replaced with:
display: flex;
justify-content:center;
HTML
<div class="example-wrapper">
<img ....>
</div>
I'm trying to add some hover effect on some images I got.
<div id="horizontal_list">
<div class="grid_3 first overlay">
<a href="#">
<img border="0" alt="first" src="path">
</a>
</div>
<div class="grid_3 overlay">
<a href="#">
<img border="0" alt="first" src="path">
</a>
</div>
</div>
When I hover the div with the overlay class I want another image to hover on top of the imagetag..
I've got the following css:
#horizontal_list{
margin-top: 18px;
height: 330px;
}
.grid_3{
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.first{
margin-left: 0px !important;
}
.last{
margin-right: 0px !important;
}
.overlay{
height: 330px;
}
.overlay:hover{
background: url('path') no-repeat;
}
I'm not sure what you mean by 'imagetag' but here is what I think you mean:
What you can do, is adding the second image in your html:
<div id="horizontal_list">
<div class="grid_3 first overlay">
<a href="#">
<img class="first_img" border="0" alt="first" src="path">
<img class="sec_img" border="0" alt="second" src="path">
</a>
</div>
<div class="grid_3 overlay">
<a href="#">
<img class="first_img" border="0" alt="first" src="path">
<img class="sec_img" border="0" alt="second" src="path">
</a>
</div>
</div>
And in your CSS:
.overlay {position: relative;}
.overlay:hover a img.sec_img {display: none;}
.overlay:hover a img.sec_img {
display: block;
position: absolute;
background: url(path) no-repeat;
top: 0;
left: 0;
width: [imgwidth]px;
height: [imgheight]px;
}
Be sure to change [imgwidth] and [imgheight] into the correct dimensions.
HTML
<div class="hoverholder">
<a href="#" class="picone">
<img src="#" alt="" />
</a>
<a href="#" class="pictwo">
<img src="#" alt="" />
</a>
</div>
CSS
.pictwo {display:none;}
.hoverholder:hover .picone{
display:none;
}
.hoverholder:hover .pictwo{
display:block;
}