I'm working on an alternate display for a presentation program that replaces an HTML div with the text of the slide.
I want to have the bottom of the text aligned to a certain point, so that it has the same bottom point regardless of the number of lines.
I have now put that div inside another (id="wrapper") in order to get it to align at the bottom. The screen will always be 1920x1080. I've used the following CSS:
#wrapper {
height: 1040px;
}
#currentslide {
display: inline-block;
background-color: rgba(0,0,0,0.8);
color: white;
text-align: center;
line-height: 1;
font-size: 32px;
padding: 10px;
vertical-align: bottom;
position: absolute;
left: 50%;
transform: translate(-50%);
}
<div id="currentslide"></div>
The inline-block is to give a background that changes with the text width, but I think it's interfering with my placement.
Thanks for any help!
Figured it out. I used:
#wrapper {
height: 1080px;
}
#currentslide {
display: inline-block;
background-color: rgba(0,0,0,0.8);
color: white;
text-align: center;
line-height: 1;
font-size: 32px;
padding: 10px;
position:absolute;
bottom: 40px;
left: 50%;
transform: translate(-50%);
}
Related
I am trying to get this to happen.
what I want
So far, I don't know how to overlap one img-div with another text-div and keep white space on the top of the text-div. You will see. What I have right now is:
<div id="some">
<img src="photos/some.png">
<div id="box">
<p>Proudly seeking</p>
<h2>some Cofefe</h2>
<button id="shopNow" class="button">Shop</button>
</div>
</div>
With some CSS that doesn't make it very appealing: what it looks like
#some{
margin-top: 20px;
background-color: red;
}
#some img{
width: 30%;
float: left;
}
#box{
padding-top: 220px;
margin-right: 40px;
font-family: "Eusthalia";
text-align: right;
}
#box p{
margin-right: 32%
}
h2 {
font-size: 2.6em;
}
button {
border: none;
font-family: "Eusthalia";
font-size: 15px;
background-color: #300c06;
color: #eadfc0;
padding: 2px 10px;
}
I am wondering if my whole approach with divs is wrong. I was researching and I found that right:0; doesn't work and stuff like that. How do I get a border to overlap behind the image? How do I give it a width and a height but make it push to the right?
Do I have to make the main div width 100% and then give the img a width 30% and the colored filled in text box 70%? But how would I have the box behind the img?
Drearo, I think you're doing fine with div tags. You just may need a bit more of them to help things along.
I would suggest the divs be position: absolute with the image in one of those. The box of text needs it too. Aside from that, a little CSS would get you the positioning you want. See here:
<div id="some">
<div class="my_img">
<img src="photos/some.jpg" />
</div>
<div id="box">
<p>Proudly seeking</p>
<h2>some Cofefe</h2>
<button id="shopNow" class="button">Shop</button>
</div>
</div>
css:
#some{
margin-top: 20px;
height: 100vh;
width: 100vw;
border: 1px solid #000;
position: relative;
}
.my_img {
position: absolute;
top: 5em;
left: 5em;
z-index: 200;
}
.my_img img {
width: 200px;
}
#box{
position: absolute;
top: 10em;
left: 10em;
transition: translate( -50%, -50%);
font-family: "Eusthalia";
text-align: right;
background: red;
min-width: 60%;
padding-right: 2em;
}
#box p{
margin-right: 32%
}
h2 {
font-size: 2.6em;
}
button {
border: none;
font-family: "Eusthalia";
font-size: 15px;
background-color: #300c06;
color: #eadfc0;
padding: 2px 10px;
}
https://jsfiddle.net/5k94j73p/
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 am trying to make it so that the button that I have centered on the screen (when the screen is full size, it is centered) stays in the center while still scaling down to fit to smaller screens.
I have tried some of the answers I found here and other places about changing position: absolute; and wrapping the button in a div with text-align: center; and margin: auto; but so far the button ends up not staying centered.
Here is what I have:
.wrapper {
text-align: center;
margin: auto;
}
#mybutton {
position: absolute;
left: 37%;
text-align: center;
cursor: pointer;
bottom: 10%;
letter-spacing: .55rem;
max-width: 50%;
background: #3498db;
background-image: linear-gradient(to bottom, #3498db, #2980b9);
text-shadow: 1px 1px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 30px;
padding: 10px 20px 10px 20px;
text-decoration: none;
border-color: #3498db;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
This is probably something very simple that I am missing, but it's late and I am tired of messing around with this, so if anyone can offer any help, it would be appreciated!
Make it simple. You just need text-align:center with width.
CSS i have used
width:50%;margin:0 auto;text-align:center;
see here
try this , it is working .
.button1 {
text-align: center;
}
.button1 a {
background-color: #03326c;
font-size: 25px;
height: 35px;
position: relative;
text-align: center;
display: inline-block;
color: white;
padding: .5em 1em;
}
<div class="button1">
<span class="Button1">BUTTON</span>
or you can put button also.
</div>
This is what I understood of your problem: you wanted to make a button that scaled in accordance with the screen size AND you wanted it to be be centered.
I've pretty much done what you've been trying to do and achieved this.
.wrapper{
text-align: center;
}
button{
width: 50%;
...
}
Assigned the text align center property to the button's parent div and assigned the button a relative width.
body {
position: relative;
}
button {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<body>
<button>CLICK ME</button>
</body>
see my pen for further explanation on how I used transform property of css
<div class="ndnmpricetag-container"><div class="ndnmpricetag price">15.00$</div></div>
<div class="ndnmpricetag-container"><div class="ndnmpricetag">500000.00$</div></div>
ndnmpricetag-container use a static background image. When using large numbers (like the second example), the image is too small for the numbers.
How can i adjust ndnmpricetag-container's background width depending on the width of ndnmpricetag ?
Full css and examples here.
You need to make following changes:
Change the display property of .ndnmpricetag-container to inline-block so that it doesn't take all of the width of block. To make div place in next line, use < br/> tag in HTML.
Give the .ndnmpricetag-container a min-width equal to the image width say 100px. This will ensure that the image will not get cropped for very small widths.
Give background-size:100% 100%;.
Give padding-right: 35px;to .tondnmpricetag so that the arrows at the end of your image are able to contain the numbers and text have enough space to adjust within image.
See the updated link
See the screenshot below:
Hi now try to this Css
.ndnmpricetag-container {
text-align: left;
display: inline-block;
vertical-align: top;
height: 53px;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png');
background-size: 100% 54px;
padding: 0 50px 0 7px;
font-size: 16px;
}
Demo
.ndnmpricetag-container {
text-align: left;
display: inline-block;
vertical-align: top;
height: 53px;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png');
background-size: 100% 54px;
padding: 0 50px 0 7px;
font-size: 16px;
}
.ndnmpricetag {
position: relative;
top: 7px;
margin-left: 7px;
margin-right: 7px;
font-face: Helvetica;
font-size:1.2em;
white-space: nowrap;
letter-spacing: -1px;
font-weight:bold;
}
<div class="ndnmpricetag-container"><div class="ndnmpricetag price">15.00$</div></div>
<div class="ndnmpricetag-container"><div class="ndnmpricetag price">500000.00$</div></div>
Use a long image and use the 'Sliding door technique'.
https://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/
You can have :before pseudo element to contain start of element, :after to contain end of element. And self element contains repeated middle background.
.a {
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png') repeat-x left center;
display: inline-block;
position: relative;
margin-left: 10px;
margin-right: 35px;
}
.a:before {
content: '';
width: 10px;
height: 100%;
position: absolute;
left: -10px;
top: 0;
display: block;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png') no-repeat left center;
}
.a:after {
content: '';
width: 35px;
height: 100%;
position: absolute;
right: -35px;
top: 0;
display: block;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png') no-repeat right center;
}
<div class="a">15464%</a>
I want to create a white hover caption that is centered vertical and horizontal. Around that i would like to add the same padding/margin and within some padding/margin with the title/caption centered, horizontal and vertical.
Because everything is responsive i think is best to use % for the most of the elements. Maybe the structure of the thumbnail/caption (html) needs to be written differently, i'm a bit stuck now.
In the example image i added some red marks what i mean.
Example:
---> FIDDLE
<div class="col-4">
<a class="thumb" href="#">
<img src="http://fakeimg.pl/500x330/ccc/">
<div class="caption"><span>Project title centered vertical and horizontal</span></div>
</a>
</div>
One option can be the use of inline-block on the span element to vertical algin, and for the space use padding and box-sizing on caption. Check this:
.caption {
position: absolute;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
background-color: white;
text-align: center;
opacity: 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
box-sizing:border-box;
padding:5px;
}
.caption span {
display: inline-block;
opacity: 0;
vertical-align:middle;
color: #111;
text-transform: uppercase;
letter-spacing: 1px;
background-color: white;
}
.caption:before {
content:" ";
height:100%;
width:0;
display:inline-block;
vertical-align:middle;
}
DemoFiddle
Check this fiddle.
Display the parent as a table-cell and use vertical align to center everything
.block {
background-color: #eee;
min-height: 200px;
display: table-cell;
vertical-align: center;
text-align: center;
}
.block-contents {
background-color: #fff;
padding: 20px;
margin: 20px;
}
You could always position the span absolutely too.
.caption span {
display: block;
position: absolute;
top:50%;
left:50%;
width:100%;
transform: translate(-50%, -50%);
color: #111;
text-transform: uppercase;
letter-spacing: 1px;
background-color: white;
}
JSfiddle Demo