Here I have a login screen consisting of a high resolution image background, and a simple login card, which I want to center in the middle of the screen.
How can I center the card vertically and horizontally in the parent, which is a simple div with a background image? Here is my HTML, for which I have not made any external CSS classes yet:
<div style="background-image: url('./res/img/bg-2.jpg'); width: 100%; height: 100%; background-size: cover;" layout-align="center center">
<md-card style="width: 30%; margin: 0;" layout-padding md-whiteframe="10">
<form name="loginForm" novalidate ng-model="loginForm">
<h2 style="margin-top: 0;">Login</h2>
<md-input-container class="md-block" flex-gt-sm>
<label>Username</label>
<input type="text" ng-model="username">
</md-input-container>
<md-input-container class="md-block" flex-gt-sm>
<label>Password</label>
<input type="text" ng-model="password">
</md-input-container>
<div layout="row">
<span flex></span>
<md-button class="md-primary md-raised" ng-click="login.login(username, password)">Login</md-button>
<md-button ng-click="login.register()">Register</md-button>
</div>
</form>
</md-card>
</div>
I've already fiddled with flexboxes and layout-align. Using the layout-align attribute of the card allowed me to center it horizontally but not vertically. Another question's answer--pertaining to divs only--said to style the child with display: inline-block; and the parent with text-align: center;, but this only centered the card horizontally and aligned the textfields and text to the center of the card as well (I definitely don't want that). Any help is greatly appreciated as I am very new to CSS and web-programming.
You need both a layout and layout-align attribute on your containing div element, so:
layout="row" layout-align="center center"
See example here - http://codepen.io/parky128/pen/PGxGrX
See the examples in the docs - https://material.angularjs.org/latest/layout/alignment
Related
I've been trying to get the images to center on the page. I tried justifying the content in the center and also aligning items in the center but neither works. Neither does margin auto (which usually does work). I tried setting similar stylings for the div containing the image but still no change. I know I can add margins but causes and issue when I set the background color of the page so I'd like a different solution. Let me know if you have any ideas, thanks!
<ngb-carousel *ngIf="images" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide *ngFor="let image of images">
<div class="picsum-img-wrapper">
<img [src]="image" alt="Random slide">
</div>
</ng-template>
</ngb-carousel>
img {
width: 50vw;
height: 80vh;
margin-left: auto;
margin-right: auto;
}
Wrap your carousel inside a div with display flex. Something like this.
<div class="carouselCont">
<ngb-carousel *ngIf="images" [showNavigationArrows]="true" [showNavigationIndicators]="true">
<ng-template class="imageSlider" ngbSlide *ngFor="let image of images">
<div class="picsum-img-wrapper">
<img [src]="getImageLink(image)" alt="Random slide">
</div>
</ng-template>
</ngb-carousel>
</div>
The css style of carouselCont class applied shall be
.carouselCont{
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
height:100vh;
}
This way your carousel shall be aligned to center of the screen horizontally and vertically. No need to give vh/vw or margins to image itself for the sole purpose of aligning carousel in center (this way your images shall get stretched /shrinked in different screen resolutions)
Thanks.
I have 3 divs, an image div, a text div and another image div
http://jsfiddle.net/m02pw4wk/4/
<div id="1" style="display:inline-block; width:100px">
<span style="margin:0;">Center<span>
</div>
I want to center the span text in its parent div
I tried vertical-align on the text but no success, also I see that there is a small margin, ou padding below the text, where is it coming from ?
Any pointing on the solution would be helpful
Cheers
You need to change the vertical-align property for the img element - not the text. It's worth noting that the default value for this property is baseline, thus the image element is aligned to the baseline of the text. Values such as top/bottom/middle will change this behavior.
Updated Example
img { vertical-align: middle; }
It's also worth noting that ids are suppose to be unique.
<div id="userbox" style="float:right; background-color:grey;display:table;">
<div id="1" style="display:inline-block">
<img src="http://www.dev2one.com/excel2web/demo/images/user_pic2.png" />
</div>
<div id="1" style="display:inline-block; width:100px;display:table-cell;vertical-align:middle;">
<span style="margin:0;">Center<span>
</div>
<div id="1" style="display:inline-block">
<img src="http://www.dev2one.com/excel2web/demo/images/cross.png" />
</div>
</div>
I have this Demo, where i tried to align image (90X90px), Label and a selectbox to be placed properly (in same line). Image is aligned top whereas label & selectbox aligned at the bottom.
So far i tried to place everything in inline-block; float.. etc. but everything fails. What i want is i want to place everything horizontally center and vertically middle with only divisions. Can any one suggest me how to do this?
HTML:
<div class="center">
<div class="search-wrapper">
<img src="images/obj.png" width="40" height="40" class="search_img_txt"/>
<h2>Lorem ipsum</h2>
<select>
<option value="am">1</option>
<option value="am">2</option>
</select>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
You just need to add following css in your code
.search-wrapper img{
display: inline-block;
vertical-align: middle;
}
Check the updated Demo
I have an HTML "toolbar" containing a number of widgets arranged horizontally. Each item is represented by a div in the source document:
<div id="widget1" />
<div id="widget2" />
<div id="widget3" />
I position the divs using float: left. The problem is that I also want them to be pinned to the top of the toolbar so that they don't wrap around if the user reduces the width of the window. Instead, I just want them to overflow horizontally (with the overflow hidden) so that the behavior is like that of a real toolbar.
In other words, I want something like position: fixed but only for the vertical coordinate. Horizontally they should be positioned one after another in a row. Is there any way to do this with CSS?
Update Here's the real HTML I'm using. The divss with class="row" are the ones that should appear as widgets in the toolbar, arranged horizontally in a single row.
<div class="row" id="titleRow">
<span class="item"> <img src="../images/logo.png" height="26" /> </span>
<span class="item" id="title">Title</span>
<span class="item" id="close" onclick="window.close();"> close </span>
</div>
<div class="row" id="menuRow">
<span class="item"> <ul id="menu"></ul> </span>
</div>
<div class="row" id="searchRow">
</div>
<div class="row" id="pageRow">
<span class="item" id="page-related-data"> Page-related data: </span>
</div>
Rather than float: left; try display: inline-block; vertical-align: top;. Then set white-space: nowrap; and overflow: hidden; on the parent element. See http://jsfiddle.net/rt9sS/1/ for an example.
Note inline-block has some issues. It's white space aware (so white space around elements in the HTML will be visible in the document). It also has limited support in IE6/7, although you can work around that by giving the element layout, e.g. .oldie .widget { display:inline; zoom:1; }. See http://www.quirksmode.org/css/display.html#inlineblock for more.
I know this is an old question, wanted to add a simple jquery answer for those that run across it.
$(window).scroll(function(){
$("#keep-in-place").css("top",$(document).scrollTop()+"px");
});
To make higher or lower on page simply add to $(document).scrollTop()
Works for me
I have a search page that contains a textbox for the search and a link that says "advanced search" similar to google.
I am having trouble centering the textbox AND having 'Advanced Search' to the right of the textbox.
Basically I want the layout to look like googles http://www.google.com/'>See here
This was my shot:
<div style="width:650px; margin-right:auto; margin-left:auto;">
<%= Html.TextBox("SearchBar")%>
</div>
<div style="width:90px; float:right;">
Advanced Search
</div>
Google uses a table to display their search box. The left and right columns have widths of 25% and the center column has a width of 50%. The search box is in the center column and the "Advanced Search" is in the right column. The left column is empty.
Then just center the table. Your search box will be centered and "Advanced Search" will appear on the right.
You can try using a wrapper div with 90px on each side and auto margin that instead.
IE
<div class="wrapper">
<div class="side"></div>
<div class="textbox"><input type="text" id="myinput"></div>
<div class="side"></div>
</div>
Not being a CSS purist, I too would go the table route since I could do that in much less time than trying to get floated DIVs to line up correctly.
You could however use 3 DIVs floated left and sized appropriately to accomplish the same thing.
<div style="width: 25%; float: left;">Your content here.</div>
<div style="width: 50%; float: left;">Your content here.</div>
<div style="width: 25%; float: left;">Your content here.</div>
you can set style to the textbox if apply something like this:
style="position absolute;top:80px;left:90px;"
your are being explicit on where you want the textbox to be displayed so you specify the pixels and it should be inside a layer... it should work for you
input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="80" size="28" value="search" style="position absolute;top:80px;left:90px">