Does anyone know how to place text after a container and it still be centered. Anyone know how to fix this? For some reason, If I don't put the position at the end if the program, it will go behind the banner picture, and if I when I try to center it doesn't work. I want them both centered, but the example to be after the banner, but whenever I try, it won't let me put the text at the right height, and be centered at the same time
.container {
position: relative;
text-align: center;
color: white;
}
.top-left {
position: absolute;
top: -8px;
left: -10px;
}
.bottom-left {
position: relative;
top: 29vh;
left:50%;
transform: translate(-50%, -50%);
}
<div class="container">
<img align="left">
<div class="top-left">
<img src="C:\Users\wadeb\OneDrive\Desktop\Untitled design.png" alt="Banner Picture" style="width:100vw;height:33vh" style="margin: 0px px"></p>
</div>
<div class="bottom-left">
Home
</div>
<h3 style=" text-decoration-style: bold; position: absolute;top:34vh; text-align: center;">example:</h3>
</div>
Any Ideas?
You are doing it all wrong, you shouldnt do img align like that simply add it after img url like this
<img src="url" align="left">
Are you asking for them both to be centered? If you are you can simply add <center> tag before container div and both will be centered. Be more precise.
I found the answer at How to center a "position: absolute" element
all I had to do was add
left: 0%;
right: 0%;
text-align: center;
I then simply did this
<span style="position: absolute; top: 38vh; left: 0%;right: 0%; text-align: center;">
Related
I have a problem with a scroll issue in Edge,
It seems that it has something to do with the base element being sticky
Here is the site link http://www.power-sonic.co.uk/drm/#section1
When you scroll it should show content to the right of the image, it works on all other browsers other than edge..
However if I change the wrapper element to position: sticky it works but its very laggy,
Is there a better fix and why would there be an issue with position relative in Edge (if thats even the issue).
HTML:
<div class="bg-parralax responsive-hide">
<section class="services-types container services-types-web">
<div class="item is-business">
<div class="pin-wrapper">
<div class="image"></div>
<div id="section1" class="font-o title">
<h3>ABOUT THE DRM SYSTEM</h3>
</div>
</div>
</div>
<div id="test" class="item is-consumers">
<div class="pin-wrapper">
<div class="image"></div>
<div class="titles">
<div class="text-block">
<h4>Designed by experts</h4>
<p>Power Sonic has been a leading force within the power solutions
industry for nearly fifty years. The same amount of expertise, quality
control and innovation has gone into developing the DRM system.
The cutting edge software has been designed to specifically operate
the technology to maximize efficiency and reliability.</p>
</div>
<div class="text-block">
<h4>Fully compliant to import and export power</h4>
<p>The DRM system is designed to operate with grid systems to import
and export power with the voltage and frequency regulations
including, FFR and DFFR schemes required by utilities to support the
grid. The DRM system can be used to support the stabilization of the
power grid.</p>
</div>
<div class="text-block">
<h4>Complete solution</h4>
<p>Our DRM system has everything needed to connect to a building or
utility network. It is incredibly easy to install, integrate and maintain.</p>
</div>
</div>
</div>
</div>
<div class="item bullets is-consumer">
<div class="pin-wrapper">
<div class="image"></div>
<div class="list text-block">
<ul>
<li style="margin-left: 0px;" class="hide-bullet"><h4>FEATURES</h4></li>
<li>Ultra high efficiency</li>
<li>High performance in any climate</li>
<li>Modular, flexible and scalable</li>
<li>Smart energy management</li>
<li>Multi grid support functions</li>
<li>Innovative demand response software</li>
<li>Reliable, field proven technology</li>
<li>Compatible with different storage technologies</li>
</ul>
</div>
</div>
</div>
</section>
</div>
SCSS:
.services-types .item {
height: 100vh;
position: relative;
}
.scrollmagic-pin-spacer {
position: absolute !important;
clip: rect(auto, auto, auto, auto);
width: 100%;
height: 100% !important;
}
.pin-wrapper {
height: 100%;
}
.services-types-web .item.is-business .image {
background-image: url("images/container-cutout.svg");
top: 50%;
margin-top: -200px;
width: 50%;
height: 463px;
position: absolute;
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
}
.services-types-web .item.is-consumers .image {
background-image: url("images/container-cutout.svg");
top: -50%;
margin-top: -200px;
width: 50%;
height: 463px;
position: absolute;
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
}
.services-types-web .item.is-consumer .image {
background-image: url("images/container-cutout.svg");
top: -50%;
margin-top: -200px;
width: 50%;
height: 463px;
position: absolute;
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
}
.title {
color: #3f434a;
position: absolute;
top: 50%;
left: 70%;
transform: translate(-50%, -50%);
text-transform: uppercase;
font-weight: 600;
width: 600px;
font-size: 55px;
text-align: center;
h3 {
font-size: 70px
}
}
.titles {
color: #3f434a;
position: absolute;
top: -44%;
left: 70%;
transform: translate(-50%, -50%);
font-size: 18px;
text-align: left;
width: 40%;
}
.list {
position: absolute;
top: -50%;
left: 71.5%;
transform: translate(-50%, -50%);
font-size: 22px;
text-align: left;
width: 40%;
}
.list li {
margin-bottom: 12px;
margin-left: 18px;
}
Im also using scroll magic to control the scroll changes but I don't think that is causing the issue but if anyone thinks its is I can include that code too.
here's what I found:
I tested your site and found the "image" element and the "edge-hide image" element perform incorrectly in Edge: When the text "ABOUT THE DRM SYSTEM" of "item is-business" appears, the 1st "image" shows well, then the 1st item text disappears and the 2nd text block of "item is-consumers" turns to its max opacity, the 1st "image" element is still visible while the 2nd "edge-hide image" of the 2nd wrapper is invisible, likewise, the 3rd item's "edge-hide image" is also invisible.
I also tested the site in Chrome, it works in a different way: When the 1st item text disappears and the 2nd text block of "item is-consumers" turns to its max opacity, the 1st "image" element becomes invisible and the 2nd "edge-hide image" of the 2nd wrapper becomes visible, as well as the 3rd item's "edge-hide image".
There may be some compatibility issue in Edge with JavaScript. Could you please share your js source files especially "sitea45afa79f7f3c8c24697.js"?
I don't know the height of parent element.
I aligned child div vertically using:
position: absolute;
top: 50%;
transform: translateY(-50%);
How can I align div in the same way in top10%-part? Child div should start after 10% of parent div vertically.
.text-image.flag {
width: 25px;
height: 25px;
position: absolute;
margin-left: 0px;
margin-right: 0px;
top: 50%;
transform: translateY(-50%);
float: right;
right: -5px;
background: url(/flag.png) 0 0 no-repeat;
}
<td class="firstColumn wide-cell index-cell tall-cell sorting_1">
<div class="inner-wrapper" style="position: relative;">
<div class="table-tooltip" index="7">
<a href="">
<div class="text-image">
Real, Student
</div>
<div class="text-image flag"></div>
</a>
</div>
</div>
</td>
I want to have top 10% from firstColumn, not from inner-wrapper.
You could add a <div id="container> around all of the relevant code, and style it like position: relative; so you can use position: absolute; on the child div, because absolute positioning only works if its parent is not statically positioned.
I guess this will help you.
.parent {
border: 1px solid #ccc;
width: 200px;
height: 200px;
display: table;
}
.child {
text-align: center;
vertical-align: middle;
display: table-cell;
}
<div class="parent">
<div class="child">
This is content.
</div>
</div>
I am trying to align vertically header text next to an image. My problem is when I decrease the window width and the text wraps (height is higher than image height) it starts to align to the top of image
.half {
width: 50%;
}
h4 {
font-size: 40px;
}
<div class="half">
<div class="advantages_header">
<img class="advantages_icon" src="http://placehold.it/90x90" />
<h4>HEADER TEXT MAYBE LONG</h4>
</div>
</div>
Oh! I just figured out by myself, thanks for reading, I hope it will help someone :)
.half {
width: 50%;
}
.advantages_header {
position: relative;
height: 90px;
}
h4 {
left: 110px;
margin-right: 110px;
font-size: 40px;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
img {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
<div class="half">
<div class="advantages_header">
<img class="advantages_icon" src="http://placehold.it/90x90" />
<h4>HEADER TEXT MAYBE LONG</h4>
</div>
</div>
JSFIDDLE demo
HTML
<div class="ratio-1439-330 bg-cover" style="background-image: url('https://www.agtinternational.com/wp-content/uploads/2013/11/City-solution.jpg');">
<div class="l-center" style="max-width: 1240px;">
<div class="square-logo bg-cover"
style="background-image:url('http://www.astronautamarcospontes4077.com.br/wp-content/uploads/2014/07/person-icon.png');">
</div>
<div class="header-cover" style="background-color: #373737; opacity: 0.9; position: absolute; bottom: 0; left:0; width: 100%; overflow: hidden; padding: 10px 0;">
<div class="l-center" style="max-width: 1240px">
<div class="nav nav-tabs" style="margin-left: 338px">
<a class="active" href="#overview" data-toggle="tab">
Overview
</a>
<a href="#visits" data-toggle="tab">
Visit
</a>
</div><!-- ./tab-lined-top-->
</div><!--tabs-->
</div><!--header cover-->
</div>
</div>
<div class="tab-content l-center" style="max-width: 1240px;">
<div id="overview" class="tab-pane active">
<div class="l-center" style="max-width: 1240px;background:red;">
TEST 1
</div>
</div><!--#overview-->
<div id="visits" class="tab-pane">
<div>
TeST 2
</div>
</div>
</div><!--tab-content-->
CSS
[class*="ratio"] {
position: relative; }
[class*="ratio"]:after {
content: '';
display: block; }
[class*="ratio"] .cly-ratio-content {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; }
.ratio-1439-330:after {
padding-top: 22.932592078%; }
.l-center{
margin: 0 auto;
}
.square-logo{
background: #fff;
position: absolute;
width: 180px;
height: 180px;
bottom: 25px;
left: 0;
margin-left: 115px;
z-index: 800;
opacity: 1;
}
.bg-cover{
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.nav-tabs{
border-bottom: 0;
}
.nav{
margin-bottom: 0;
}
Currently it works on jsfiddle, but not on my local machine so you might not understand what I am asking.
Bootstrap is only there for tabs to be clickable. The logo move from left to right when browser is being resized and it looks jumpy while moving. Another issue is that the div with l-center and max-width seems not to be working well for tab pane content. Suspect that it is because of no height.
Is there any way around to force make logo stay vertically lined to tab content and tabs should move as well while browser is resizing?
Help appreciated!
If I understand you correctly, the problem must be that the block of code below has a fixed margin left property value of 115px. So it doesn't actually move on re-size, it just leans on the given margin value. Until there isn't a fixed margin-left, it will keep happening.
.square-logo {
background: #fff;
position: absolute;
width: 180px;
height: 180px;
bottom: 25px;
left: 0;
margin-left: 115px;
z-index: 800;
opacity: 1;
}
Fix I suggest you do something like below
.square-logo{
background: #fff;
position: absolute;
width: 50%; /* Adjust as needed */
height: auto;
bottom: 25px;
left: 25%; /* Adjust as needed */
z-index: 800;
opacity: 1;
}
Note: You may need to adjust the example to suit your need. Just don't use margin-left
First of all please remove the inline css for flexibility. If your html code like this
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="square-logo">
<img src="images/logo.png" alt="Logo">
</div> <!-- End Logo Block -->
</div> <!-- End Column 12 -->
</div> <!-- End row -->
</div> <!-- End Container -->
Then to make your logo center add this css code.
.square-logo {
display: table;
margin: 0 auto;
}
I have some divs which contain an image that fills the whole div:
<div class="callout">
<img src="images/callout_image.gif" alt=""/>
</div>
.callout { float: left; width: 267px; height: 114px; }
Now I want to put another image in this DIV which overlaps part of the original image AND will also "pop out" of the DIV, i.e. it will extend beyond the dimensions of the DIV but the DIV itself does not extend.
I am having trouble doing this, can anyone help?
Something like this:
<div class="callout">
<img src="images/callout_image.gif" alt=""/>
<img src="images/callout_image.gif" alt="" class="pop" />
</div>
.callout { float: left; width: 267px; height: 114px; position: relative;}
.pop {position: absolute; top: 50%; left: 50%; z-index: 1;}
You might need to set overflow: visible on the div depending on the circumstances.