I am having a problem with vertically aligning my text which is shown on top of my image. It works fine for one resolution but as the height of the image changes the text is no longer vertically aligned.
I believe the problem is on this line: <div class="block" style="height:100%;">
If I could change the height variable to the size of the image as it resizes then I think it would work but I am not sure how to do that.
The HTML and CSS code for my problem are on a fiddle.
CODE HERE
Any help would be greatly appreciated, thanks!
Related
I need help with styling navbar menu for mobile devices. Currently I am able to either have all the buttons be on the left, but when i try to put them in the center of the screen they do align but its left-aligned in the center of the page whereas I want it to be center-aligned to the center.this is on the left without any style
when i add this code [div className="flex justify-center items-center"] it becomes like this image.which is like this in the center but still left-aligned text
how can i make it center-aligned text so that it looks a center flow and not so strict.
any help would be appreciated.
To make text center aligned use text-center in your div className. If this doesn't work, do this directly on the text, e.g: h2 className='text-center'.
Please guys help me ... The sidebar will be allways active so i need to center the content on the webpage such as the highlighted text. The problem is that it's centered with width of the whole page counting the sidebar. can i divide the the widths somehow? the sidebar is made in bootstrap it's made with cols so i dont know the exact width.
You can post your code, but the general idea would be for you to place a div next to sidenav (to the right), you can do that by setting the margin-left to the width of the sidenav and center the text in that div
I'm having a problem achieving the layout for a website I'm designing.
There are three blue divs across the top of the page under which I have placed four red divs. Each of the red divs will take up just less than a quarter of the width of the page.
After putting an input field in the right most blue div the position of the red divs gets shifted to the right and some red divs appear below others.
I've tried changing the position properties on various divs but can't seem to restore the layout I wanted and have tried adding margins but to no avail.
Can anyone see the problem in my code and/or layout? Any help will be greatly appreciated, I've included all the code in a JSfiddle page.
Many thanks.
http://jsfiddle.net/4cb5za9y/
enter code here<style type="text/css">
There was simply a </div> missing after your input, which broke the layout. Here's the updated fiddle.
I am having trouble figuring out how to arrange the divs on this page so that they will be centered and not left aligned. Also, I wanted to overlay a lock icon in the corner. I was able to get it on there, but i want it to not affect the actual size of the image, but to overlap instead...Here is the fiddle to the CSS and HTML:
jsfiddle.net/bpalmer318/tpb2c7un/1/
To summarize: How do i center all the page content and how do i overlay the second image without making the bottom image smaller? (Note** The images used are just NFL logos but this will be for business purposes with company logos later)
I hope that this post serves to show others how to make complex div pages with overlaying images
Thank you for the help!
You can't center a float element.
Here's a demo using inline-block
there are many ways to center the content of a page. Here just one:
On the html page:
<div id="center">your content here</div>
On the css:
#center{
width:85%;
margin-left:auto;
margin-right:auto;
}
of course the porcentage should be adjusted to your needs i've tried this one in your example and it seems to look centered. Try to get the percentage to be exacly the same with(or maybe a bit more) of the content.
Hope it helps.
you can also see this post it may guide you : How to horizontally center a <div> in another <div>?
Here's my problem. I am using Bootstrap 3. I need an element to remain 'absolute positioned' within a two column layout. My layout works great but on a tablet or mobile the design means that text scrolls underneath the 'absolute fixed element'.
If you resize the browser on a live demo you will see what I mean here: http://www.concise-courses.com/test-yourself/y/a.php
What is the work around to prevent the text scrolling underneath the clock? I was thinking a background image (didnt work) or a fading technique (didnt really work) or just text-overflow for vertical scrolling....
Any ideas? Thanks as ever!
If you want to hide column A when mobile, just add hidden-xs as a class to that column. It will hide the specified column when the screen is smaller than 768px (e.g. Bootstraps' "xs" setting, see Bootstraps' grid system for more information).
An example: JSFiddle
<div class="row">
<div class="hidden-xs col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
How you want it to look when its on mobile? static? or just hiding the text that behind it?