I am trying to add a text overlay to my images, but I am struggling making it responsive, and vertically centered.
Here is where I got : http://jsfiddle.net/r8rFc/910/
.img-overlay {
position: relative;
}
.project-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(41,128,185,0.9);
color: #fff;
}
.centered-text
{
display:table;
height:100%;
width:100%;
text-align:center;
vertical-align:center;
}
I am able to center the text horizontally, but I cannot make it vertically... I really have no clue how to do that. All I checked was either non responsive, or it was just a logo at the center of the overlay...
Thanks !
Thanks to Henrique Barcelos, I have been able to solve the issue.
Here is the fiddle giving the solution : http://jsfiddle.net/r8rFc/912/
.project-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(41,128,185,0.9);
color: #fff;
display:flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
How about setting
.project-overlay as such
.project-overlay {
position: absolute;
top: 45%;
left: 0;
text-align: center;
width: 100%;
background-color: rgba(41,128,185,0.9);
color: #fff;
}
With this you can try setting a wrapper div to set the background color to whatever color it is that you want
Related
I need the navigation bar on my website to stay horizontally centered on the page while having the position: fixed; property and I need the width to always be the same as the content inside the div
Is there a way to accomplish this?
Here is the CSS I have now:
.tab {
overflow: hidden;
background-color: #505050;
padding: 0;
width: fit-content;
border-radius: 15px;
position: fixed;
top: 0;
margin-left: 280px;
z-index: 10;
}
Here is my website if you need that to see what I need.
Remove margin-left in code.
Set transform and left for horizontally center.
Modify width to 100%.
.tab {
overflow: hidden;
background-color: #505050;
padding: 0;
width: 100%;
border-radius: 15px;
position: fixed;
top: 0;
z-index: 10;
transform: translateX(-50%);
left: 50%;
}
Add a wrapper around your tab
<div class="tabwrapper">
<div class="tab">
</div>
</div>
<style>
.tabwrapper {
position: fixed;
width: 100%;
text-align: center;
top: 0;
}
.tab {
margin: 0 auto;
display: inline-block;
}
</style>
Another option is to add a flexbox wrapper around your element and fix its position:
.tab-wrapper {
display: flex;
justify-content: center;
position: fixed;
top: 0;
width: 100%;
border: solid red 1px;
overflow: hidden;
z-index: 10;
}
.tab {
padding: 0;
border: solid blue 1px;
}
<div class='tab-wrapper'>
<div class='tab'>
Content
</div>
</div>
Borders added for visual clarity.
Here is the code.
The text align wont work.
html {
position: fixed;
top: -50px;
background-color: #c4f3ff;
}
div {
width: 100%;
height: 50px;
text-align: center;
}
h1 {
font-family: monospace;
line-height: normal;
color: #fffb29;
font-size: 50px;
position: fixed;
top: -20px;
}
Here is a screen shot of the result
You mean the yellow text need to be align to center/right or somewhere?
If so, you just use:
h1{
width:100%;
text-align:center;
}
In your css file you marked your html (??) and all your divs with
position: fixed;
Position fixed elements will need a width as well. add
width: 100%;
or
width: 100vw;
So it can center your text.
I am trying to build a sidebar with centered vertical elements like this design:
I couldn't figure it out after 2 hours so I decided to ask you guys if somebody could help me since I can't find any good links that can provide helpful information.
I think I am doing something wrong in the following sidenav class:
.sidenav {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #16191C;
position: fixed;
top: 0px;
width: 150px;
height: 100%;
color: #e1ffff;
}
Check JsFiddle.
First the a href must be inside the li element..
use flexbox.
ul {
position: fixed;
z-index: 1;
top: auto;
bottom: auto;
left: 0;
/*right: 0;*/
margin: auto;
height: 100%;
width: 100%;
padding: 50px;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
}
ul li {
display:block;
width:100%;
}
Try this updated fiddle
OK try this
with more elements
I'm trying to get a repeating background image over my rebecca-purple background color for my jumbotron. I know I'm doing something wrong, just don't know what it is. Here's the code:
.jumbotron {
background-color: rebeccapurple;
color: white;
width: auto;
height: 350px;
margin-bottom: 100px;
position: relative;
display: block;
font-family: FontAwesome;
}
.jumbotron::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(\images\bg_images\maze_white.png) repeat center center;
z-index: -1;
}
All help is appreciated. Thank you.
Your maze is behind the jumbotron due to z-index:-1. What you need to do is swap the backgrounds around, like in this fiddle http://jsbin.com/tekefobive/edit?css,output
.jumbotron {
background-image:url('pattern');
...
}
.jumbotron:after{
background:purple;
z-index:-1;
...
}
// Try This
.jumbotron {
background: url("IMAGE PATH") rebeccapurple repeat center center;
color: white;
width: auto;
height: 350px;
margin-bottom: 100px;
position: relative;
display: block;
font-family: FontAwesome;
}
Here is my jfiddle - fiddle, everything is perfect here but only the probelm is when you minimise the window the image goes down , need to fit that image in vertically center which is not happening now
HTML:
<div class="left_panel">
<div class="slide-frame">
<img src="http://www.w3schools.com/bootstrap/paris.jpg">
</div>
</div>
CSS:
.left_panel {
border: 1px solid #ddd;
border-collapse: collapse;
bottom: 0;
left: 0;
position: absolute;
right: 300px;
top: 0;
background:#ddd;
}
.left_panel .slide-frame::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.left_panel .slide-frame{
height: 100%;
text-align: center;
width: 100%;
}
.left_panel .slide-frame img {
display: inline-block;
height: auto;
max-height: 100%;
max-width: 100%;
vertical-align: middle;
width: auto;
}
The reason for this behaviour is, that the :after element is an inline element. That causes a little gap between the image and that element. With setting the fon-size to zero, you remove that gap:
.left_panel {
font-size: 0;
}
Good article about that topic on CSS-Tricks. This solution is preferable, because you aren't using text. With text, there are other approaches to remove the space between inline elements.
Please check this for vertical and horizontal div without using height. https://jsfiddle.net/hardyrajput/myuqm5x8/2/
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 50%;
padding: 20px;
color: white;
text-align: center;
}
use this
.left_panel .slide-frame {
height: 100%;
text-align: center;
width: 100%;
display: inline-table;
}
just add display property