Trying to keep this div full of text in the center of the page, behind an image that fades out. I have everything worked out except for the centering of the text div. I tried doing margin-left: auto;margin-right: auto, but to no avail. Am I doing something wrong?
And I'm testing the results in Chrome as I go, if that makes a difference.
HTML
<div class="content">
<div class="info">
<p class="title">is this like, something i don't know</p>
<p> </p>
<p class="size">90 x 145 cm</p>
<p> </p>
<p class="year">2012</p>
</div>
<img class="work" src="029.jpg"/>
</div>
CSS
.work {
display: block;
margin-left: auto;
margin-right: auto;
}
img.work:hover {
opacity:0.5;
}
.content {
position: relative;
}
.info {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
position: absolute;
z-index: -1;
}
.title {
font-size: 20px;
font-weight: bold;
}
.year {
font-size: 15px;
font-weight: bold;
}
.size {
font-size: 15px;
font-weight: bold;
}
See this fiddle
Since you are using absolute positioning, use
left:0;
right:0;
to make items centralized.
Thus your new CSS for .info would be like
.info {
text-align: center;
margin-top: 100px;
position: absolute;
z-index: -1;
right:0;
left:0;
}
Related
I am coding a Facebook clone with some changes to enhance my skills, but I have ran into a problem.
I have an image(profile picture) and text(user name) under the <h1> of Home. I am trying to align the text exactly to the center to the right of the image
example:
[
top of image
CENTER OF IMAGE TEXT
bottom of image
] ( what I expected/Wanted)
I am not getting the result I want. Instead, the image the text is at the top to the right of the image.
example:
[
top of image
center of image
BOTTOM OF IMAGE TEXT
](result)
The HTML:
<div class="sidebar">
<h1 class="home">Home</h1>
<a class="create-button" href="#">Create</a>
<div class="personnal-info">
<img class="sidebar-profile-picture" src="icons\my profile.jpg">
<p class="my-user-name">Said User</p>
</div>
</div>
The CSS:
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
z-index: 100;
padding-top: 5px;
background-color: white;
width: 400px;
margin-left: 20px;
}
.home {
display: inline-block;
font-size: 35px;
font-family: Roboto, Arial;
}
.create-button {
display: inline-block;
font-size: 17px;
color: rgb(23, 93, 255);
text-decoration: none;
margin-left: 220px;
}
.sidebar-profile-picture {
height: 30px;
border-radius: 16px;
margin-right: 8px;
}
.my-user-name {
display: inline-block;
font-size: 16px;
font-family: Roboto, Arial;
font-weight: bold;
}
Flexbox is perfect for these cases. Change the .personalInfo div to a flexbox by adding the display: flex property. Then you have access to many other properties for centering, etc.
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
z-index: 100;
padding-top: 5px;
background-color: white;
width: 400px;
margin-left: 20px;
}
.home {
display: inline-block;
font-size: 35px;
font-family: Roboto, Arial;
}
.create-button {
display: inline-block;
font-size: 17px;
color: rgb(23, 93, 255);
text-decoration: none;
margin-left: 220px;
}
.sidebar-profile-picture {
height: 30px;
width: 30px; /* demo only */
background-color: blue; /* demo only */
border-radius: 16px;
margin-right: 8px;
}
.my-user-name {
/* display: inline-block; -> not necessary anymore*/
font-size: 16px;
font-family: Roboto, Arial;
font-weight: bold;
}
/* FLEXBOX */
.personal-info{
display: flex;
flex-direction: row; /* display children in a horizontal row */
align-items: center; /* vertically align items in the center */
}
<div class="sidebar">
<h1 class="home">Home</h1>
<a class="create-button" href="#">Create</a>
<div class="personal-info">
<img class="sidebar-profile-picture">
<p class="my-user-name">Said User</p>
</div>
</div>
Not sure I understand your requirement correctly.
You can use flex to achieve the below result.
Let me know if this works
.personnal-info {
display:flex;
align-items: center
}
<div class="sidebar">
<h1 class="home">Home</h1>
<a class="create-button" href="#">Create</a>
<div class="personnal-info">
<img class="sidebar-profile-picture" src="//via.placeholder.com/50x50">
<p class="my-user-name">Said User</p>
</div>
</div>
hey Mihai T thanks for the response ! It actually worked.
But didn't put it in an ideal position.
I actually fixed the problem by putting position: relative; on personnal-info.
Then I put in my-user-name
position: absolute; top: -8px;
PS: It also worked with bottom: -8px; instead of top: -8px.
Thanks !
This is my HTML code:
<img class="centeredimage" src="BLACK.jpg"><br><br>
<p align="center" class="new"><b><span class="main_text">This is regarding....</span></b><br><br>
<span class = "a2017">Welcome to 2017</span><br><br>
<span class="coming_soon">Coming Soon</span></p><br><br>
This is my CSS code:
.centeredimage {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
}
.new{
color:#FFFFFF;
}
.main_text{
font-size:20px;
letter-spacing: 8px;
}
.a2017{
font-size:15px ;
letter-spacing:2px ;
}
.coming_soon{
letter-spacing: 1px;
}
The image is aligned at center of the screen but the text instead of getting displayed after the image is displayed coinciding with the image.How do I make it come after the image so that both are aligned at middle of the screen at center?
Try this
.centeredimage {
display : block;
width: 200px;
margin: auto;
...
I use this code to center things in the middle of the screen, for example, a loader. It can have multiple parts, it doesn't matter. You just put all the parts into one div. I used to use the "margin" trick, and still do here and there, but these days I'm using the table/tablecell thing to get the job done. It works everywhere, phones etc. (note I don't deal with 10-year-old browsers). Below is some code straight from an instructional sample:
<style>
.app_style {
width: 100%;
height: 100%;
display: table;
}
.loader_style {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.loader_icon_style {
border: 2px solid lightgray;
border-radius: 5px 5px 5px 5px;
}
.loader_bar_padding {
padding-top: 10px;
}
.loader_blurb {
width: inherit;
text-align: center;
font-size: 14px;
font-weight: bold;
color: yellow;
font-style: italic;
}
</style>
</head>
<body>
<sample-app class="app_style">
<div class="loader_style">
<img class="loader_icon_style" src="assets/images/r2-d2.jpg" />
<div class="loader_blurb loader_bar_padding">
May the force be with you...
</div>
<img class="loader_bar_padding" src="assets/images/loader-bar.gif" />
</div>
</sample-app>
</body>
If you want center the image and the text, not align only the image otherwise the text follow an other logic on the DOM, mostly if you use the absolute position for the image and not for the text.
You can use a wrapper div aligned to the center and put all content in it.
body {
background-color:#ff00ff;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -100px;
width: 200px;
height: 300px;
}
.your_image {
width: 200px;
height: 200px;
}
.new {
color: #FFFFFF;
}
.main_text {
font-size: 20px;
letter-spacing: 8px;
}
.a2017 {
font-size: 15px;
letter-spacing: 2px;
}
.coming_soon {
letter-spacing: 1px;
}
<div class="wrapper">
<img class="your_image" src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png"><br><br>
<p align="center" class="new"><b><span class="main_text">This is regarding....</span></b><br><br>
<span class="a2017">Welcome to 2017</span><br><br>
<span class="coming_soon">Coming Soon</span></p><br><br>
</div>
I prefer to use Flexbox. It simplifies a lot of the coding you need to do.
In your situation, just wrap your HTMl code in a div and make this your CSS:
div{
display: flex;
flex-direction: column;
justify-content: center;
}
.centeredimage {
display: block;
margin: 0 auto;
width: 200px;
height: 200px;
}
I'm trying to make menubar at the top of my website.
It should looke like this:
The red square is my button.
My problem is that my headline and my button are not in the same line. So I tried to use a table but then there are both aligned to the left.
After that I used float: right; for my button.
It is now aligned right but in the next line.
How can I fix it so my button and my headline are in the same line and aligned like my picture.
HTML:
<div id="topbar">
<h1>Fahrplan</h1>
<button type="button" id="settings"></button>
</div>
CSS:
h1 {
height: 44px;
margin: 0;
color:#FFFFFF;
text-align: center;
font-family: Helvetica, sans-serif;
font-size: 16px;
line-height: 44px;
}
#topbar button {
height: 20px;
width: 20px;
float: right;
}
For this kind of scenarios, you might consider using positions.
#topbar {
position: relative;
}
h1 {
margin: 0;
color:#FFFFFF;
text-align: center;
font-family: Helvetica, sans-serif;
font-size: 16px;
line-height: 44px;
background: #99f;
}
#topbar button {
height: 20px;
width: 20px;
position: absolute;
top: 50%;
right: 5px;
margin-top: -10px;
}
<div id="topbar">
<h1>Fahrplan</h1>
<button type="button" id="settings"></button>
</div>
Here I have given position to both #topbar and the button. The #topbar has a relative position and button has an absolute position:
#topbar {
position: relative;
}
button {
position: absolute;
top: 50%;
right: 5px;
margin-top: -10px;
}
And I have also adjusted the button to be vertically centred by using the negative margin of half the height. Hope this helps.
I would rather suggest you to use absolute along with translateY() to align your button vertically middle.
Demo (Note: Am using SCSS on jsFiddle so don't get confused with the syntax)
header {
height: 40px;
background: tomato;
position: relative;
h4 {
line-height: 40px;
text-align: center;
}
button {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
}
}
Explanation:
I am using position: absolute; to move your button to the right. As far as vertical centering goes for your button, you can use top: 50% and transform to nudge your button exactly in the middle of your header vertically. It will always stay vertically centered without you declaring any static height.
For your interest, here's how to do it with inline-blocks.
div > * {
display:inline-block;
vertical-align:middle;
}
h1 {
width:100%;
text-align:center;
margin-right:-40px;
background-color:#4F81BD;
color:#FFF;
font-family: Helvetica, sans-serif;
font-size: 16px;
height: 44px;
}
button {
height: 30px;
width: 30px;
margin-right:-6px;
border: 3px solid #8C3836;
border-radius:5px;
background-color:#C0504D;
}
<div id="topbar">
<h1>Fahrplan</h1>
<button type="button" id="settings"></button>
</div>
Here is a quick demo of how to do this using http://tachyons.io
<div class="bg-light-gray dt w-100">
<div class="dtc v-mid w3"></div>
<div class="dtc v-mid tc pv3">
<h1 class="mv0 f5">Headline</h1>
</div>
<div class="dtc v-mid tr w3 pr2">
<button class="bg-black br2 h2 w2"></button>
</div>
</div>
CSS:
.br2 {
border-radius: .25rem;
}
.dt {
display: table;
}
.dtc {
display: table-cell;
}
.h2 {
height: 2rem;
}
.w2 {
width: 2rem;
}
.w3 {
width: 4rem;
}
.w-100 {
width: 100%;
}
.bg-black {
background-color: #111;
}
.bg-light-gray {
background-color: #eee;
}
.pr2 {
padding-right: .5rem;
}
.pv3 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.mv0 {
margin-top: 0;
margin-bottom: 0rem;
}
.tr {
text-align: right;
}
.tc {
text-align: center;
}
.f5 {
font-size: 1rem;
}
.v-mid {
vertical-align: middle;
}
Demo:
https://jsfiddle.net/r21mdrzs/
The downside is that you include an empty div. The plus side is that even if you zoom in or out, change font-size or size of button, everything will always be aligned to the middle, not matter what. This is in my experience is less brittle than using magic number values for positioning.
Give your headline float property;
.classNameGiveToHeading {
float: left;
}
.buttonClassName {
float: right;
}
OR give "float:right" to both of them as you like.
I'm trying to get 3 divs to all be side by side below another div (that contains a h1 and a piece of small text below it). I'm having some trouble doing it.
What I am aiming for is something like this:
I've tried to put a div (that encompasses the 3 other divs) below the main title div.
I've tried this CSS:
.content-info {
text-align: center;
font-family:'Montserrat', sans-serif;
top: 80%;
left: 50%;
text-align:center;
}
/* this is for the 3 divs to set width, etc*/
.content-info div {
width:300px;
padding:25px;
margin: 25px;
}
Here is a JSFiddle of what I've got so far: http://jsfiddle.net/4zx9gxgL/
Any suggestions/ideas?
You can use display:table-row and display:table-cell to make it work similar to a table.
For example:
.content-info {
text-align: center;
font-family:'Montserrat', sans-serif;
display: table-row;
}
.content-info div {
width:300px;
padding:25px;
margin: 25px;
display: table-cell;
}
And you can remove the .one{}, .two{}, .three{} in your css
There are several ways to go about this. CSS table, float and position offer three possible solutions. Depending on your overall objectives, here's a solution featuring inline-block (no table, no float, no position). This solution is very simple, stable, responsive, and easy-to-customize.
DEMO: http://jsfiddle.net/nayztL4y/2/
HTML
<div class="container">
<h1>H1 Header</h1>
</div>
<div class="container">
<div class="boxes"><h2>Box 1</h2></div>
<div class="boxes"><h2>Box 2</h2></div>
<div class="boxes"><h2>Box 3</h2></div>
</div>
CSS
.container {
width: 90%;
height: 200px;
border: 1px solid black;
margin-bottom: 10px;
text-align: center;
background-color: #ff0;
}
.boxes {
width: 25%;
height: 180px;
border: 2px dashed red;
margin: 8px 10px;
display: inline-block;
}
UPDATE
I've updated your fiddle demo, as well.
http://jsfiddle.net/4zx9gxgL/33/
so you want to put all thre divs side by side. i think it's that .
.main-content {
text-align: center;
font-family:'Montserrat', sans-serif;
position: relative;
}
.content-info {
position: relative;
width: 100%;
height: 110px;
top: 0px;
}
.yo{
display: inline-block;
width: 33%;
margin-right: -2px;
text-align:center;
}
https://jsfiddle.net/4zx9gxgL/30/
I had a go aswell ...
#import url(http://fonts.googleapis.com/css?family=Montserrat);
body {
background: url("http://pre15.deviantart.net/52ce/th/pre/i/2011/174/b/c/candy_blur_abstract_hd_by_ivereor-d3jsglw.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
}
.yx {
text-align: center;
}
.main-content {
text-align: center;
font-family: 'Montserrat', sans-serif;
display: block;
position: relative;
top: 20%;
left: 50%;
margin-top: 100px;
height: auto;
margin-bottom: -100px;
/* bring your own prefixes*/
transform: translate(-50%, -50%);
}
.main-content h1 {
font-size: 62px;
}
.main-content h2 {
font-size: 32px;
}
.content-info {
text-align: center;
font-family: 'Montserrat', sans-serif;
position: relative;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.content-info div {
width: 300px;
padding: 25px;
margin: 25px;
}
.one {
display: inline-block;
max-width: 33%;
}
.two {
display: inline-block;
max-width: 33%;
}
.three {
display: inline-block;
max-width: 33%;
}
<body>
<div class="main-content yx">
<h1>Name Here</h1>
<h2>Hi, I'm Name.</h2>
</div>
<div class="content-info">
<div class="one">
<h3>BORAT IPSUM</h3>
<p>This is my country of Kazakhstan. It locate between Tajikistan, and Kyrgyzstan, and assholes Uzbekistan.. What's up with it, vanilla face? Me and my homie Azamat just parked our slab outside. We're looking for somewhere to post up our black asses
for the night. So, uh, bang bang, skeet skeet, nigga. Just a couple of pimps, no hoes..</p>
</div>
<div class="two">
<h3>BORAT IPSUM</h3>
<p>This is my country of Kazakhstan. It locate between Tajikistan, and Kyrgyzstan, and assholes Uzbekistan.. What's up with it, vanilla face? Me and my homie Azamat just parked our slab outside. We're looking for somewhere to post up our black asses
for the night. So, uh, bang bang, skeet skeet, nigga. Just a couple of pimps, no hoes..</p>
</div>
<div class="three">
<h3>BORAT IPSUM</h3>
<p>This is my country of Kazakhstan. It locate between Tajikistan, and Kyrgyzstan, and assholes Uzbekistan.. What's up with it, vanilla face? Me and my homie Azamat just parked our slab outside. We're looking for somewhere to post up our black asses
for the night. So, uh, bang bang, skeet skeet, nigga. Just a couple of pimps, no hoes..</p>
</div>
</div>
<footer></footer>
</body>
.content-info {
text-align: center;
font-family:'Montserrat', sans-serif;
top: 80%;
left: 50%;
float:left;
width:100%;
text-align:center;
}
/* this is for the 3 divs to set width, etc*/
.content-info div {
width:300px;
padding:25px;
margin: 25px;
float:left;
}
If the 3 bottom divs don't align correctly remove the margin settings, or adjust accordingly.
I have an image with a background overlay that needs to respond to screen devices.
The bg overly needs to remain full width but putting 100% width just creates an overflow on small devices and underflow on larger ones.
Appreciate the help.
Please see my js fiddle
.col-md-3{
width:30%;
}
img{
width:100%;
}
.brand-category{
position: relative;
}
.brand-text{
position: absolute;
background-color: rgba(130,130,130,0.5);
font-weight: 100;
font-size: 0.9em;
color: #fff;
text-align: center;
bottom: -10px;
padding: 5px;
}
Paddings cousing overflow
<div class="col-md-3 brand-category">
<p class="brand-text"><span>Category</span></p>
<img src="http://paulobriendesign.com/img/paul-obrien.jpg" class="img-responsive" alt="">
</div>
css
.col-md-3{
width:30%;
}
img{
width:100%;
}
.brand-category{
position: relative;
}
.brand-text{
position: absolute;
width: 100%;
background-color: rgba(130,130,130,0.5);
font-weight: 100;
font-size: 0.9em;
color: #fff;
text-align: center;
bottom: -10px;
}
.brand-text span {
display: block;
margin: 5px;
}
http://jsfiddle.net/XWfN4/
Simply add display:block; to your img CSS
img{
width:100%;
display:block;
}
Demo Without
Demo With