I have this piece of code:
<div
*ngIf="loginForm.get('username').errors.required"
class="md-margin--s md-margin__horizontal--l">
<i class="icon icon-clear_20 i-class-top"></i>
<span class="md-margin__left--s">Please Enter Username</span>
</div>
This is the result in the UI:
I am not able to place the text at the center vertically.
you should add a class to with below CSS:
.wrapper{
display:flex;
align-items:center;
justify-content:flex-start;
}
Related
I've created an image gallery but I am unsure about how to center the images in the middle of the page horizontally and vertically.
<div class="gallery">
<a target="_blank" href="Icon_pyro.jpg">
<img src="Icon_pyro.jpg" alt="Pyro" width="256" height="256">
</a>
<div class="desc">Pyro</div>
</div>
With my CSS classes being
div.gallery {
display: block;
margin: 0 auto;
text-align: center;
}
div.gallery img {
margin: 5px;
}
It shows up stacked on top, I am stumped on how to make them side by side
Current webpage
You can use display:flex property to fix your problem.
I will give you some Idea........................
horizontally center
if you use display:flex; all div elements are show as row. Then if you use justify-content:center; you row element will be center horizontally.
.html
<div class="imageContainer">
<div class="img">
<img src="https://via.placeholder.com/256x256">
</div>
<div class="img">
<img src="https://via.placeholder.com/256x256">
</div>
<div class="img">
<img src="https://via.placeholder.com/256x256">
</div>
</div>
.css
.imageContainer{
display:flex;
justify-content:center;
}
.img{
margin:5px;
}
jsFiddle example
Vertically center
You have to only add align-items: center; and min-height: 100vh;
.imageContainer{
display: flex;
align-items: center;
min-height: 100vh;
}
jsFiddle Example
horizontally and vertically Center.
just add (here has both above css propertise. have a look and get the idea)
.imageContainer{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}
jsFiddle Example
As well as check following example it will show you how to center columns items vertically and horizontally (just added flex-direction:column;)
.imageContainer{
display:flex;
align-items:center;
min-height:100vh;
flex-direction:column;
justify-content:center;
}
jsFiddle Example
Here is the tutorial if you want to follow and get some idea about flex
Can you please check the below code? Hope it will work for you.
You have to add one parent element for all the gallery elements and give flex utility property to that parent. You need to set the height of gallery parent element as per requirements (currently, we have set viewport height for the below demo).
Please refer to this link: https://jsfiddle.net/yudizsolutions/b2fq8dhr/
It sounds like you will want to wrap the images using flex to get them side by side.
In that case, I would create a gallery-wrapper div that wraps around all of your gallery divs. You can style the gallery-wrapper to get flex, which will make it's children side-by-side by default. Also, add justify-content: center, to center things horizontally. Check out this jsFiddle / my updated answer, and consider learning more about Flexbox styling - it's the best.
.gallery-wrapper {
display: flex;
justify-content: center;
}
<body>
<div class="gallery-wrapper">
<div class="gallery">
<a target="_blank" href="Icon_pyro.jpg">
<img src="Icon_pyro.jpg" alt="Pyro" width="256" height="256">
</a>
<div class="desc">Pyro</div>
</div>
<div class="gallery">
<a target="_blank" href="Icon_scout.jpg">
<img src="Icon_scout.jpg" alt="Scout" width="256" height="256">
</a>
<div class="desc">Scout</div>
</div>
<div class="gallery">
<a target="_blank" href="Icon_spy.jpg">
<img src="Icon_spy.jpg" alt="Spy" width="256" height="256">
</a>
<div class="desc">Spy</div>
</div>
<div class="gallery">
<a target="_blank" href="Icon_soldier.jpg">
<img src="Icon_soldier.jpg" alt="Soldier" width="256" height="256">
</a>
<div class="desc">Soldier</div>
</div>
</div>
</body>
There a few HTML elements that I want to put in a line. This is the code I have used.
<input type = "text" className="search" placeholder="Search"></input>
<a href="/">
<img src="logo.svg"></img>
<h3>NameOfTheWebsite</h3>
</a>
SignIn
SignOut
But the output for this code is like this.
I want to put those elements in the same line and the logo should be top of the website name. How do I achieve this?
FlexBox is a really useful thing in such situations. In the following snippet, I have used some flexboxes just to get you familiar with it. But this is something that you should definitely master and use in your CSS layouts. MDN Web docs have a really great tutorial for that.
.home-page{
display:flex;
margin:15px;
}
.controls{
display:flex;
justify-content:space-between;
align-items:center;
}
.signing-buttons{
display:flex;
}
.signing-buttons a{
margin:5px;
padding:10px;
border:2px solid red;
border-radius:4px;
}
<a class="home-page" href="/">
<h3>NameOfTheWebsite</h3>
<img src="logo.svg"></img>
</a>
<div class="controls">
<input type = "text" className="search" placeholder="Search"></input>
<div class="signing-buttons">
SignIn
SignOut
</div>
</div>
You can use flexbox to achieve this. Just a minimalistic example to illustrate my point is shown below. You can control how much space each item will occupy and a lot of other things.
.row {
display:flex;
}
.search {
flex:1;
border:1px solid black
}
.name {
flex:1;
border:1px solid black
}
<div class='row'>
<div class='search'>Search Box</div>
<div class = 'name'>Name</div>
</div>
<div class='row'>Next line</>
Sorry for my poor English.
I have a span (like $) and an input, when user inputs something, the span and input should always stay centered horizontally.
I want it looks like the row 1 in the code below. But in fact I can just code it like row 2.
I want a solution, it will be better to be without js.
I've read about this article(HTML text input field with currency symbol) but it doesn't solve my problem for it doesn't center anything.
.main{
display:flex;
align-items:center;
justify-content:center;
}
.this-should-be-input{
font-size:36px;
}
.the-input{
border:none;
text-align:center;
}
<div class="main">
<span style="font-size:24px;">$</span>
<div class="this-should-be-input">
12345
</div>
</div>
<div class="main">
<span style="font-size:24px;">$</span>
<input class="this-should-be-input the-input" value="12345"/>
</div>
You could just put the $ in the value, and it will move with the value.
.main{
display:flex;
align-items:center;
justify-content:center;
}
.this-should-be-input{
font-size:36px;
}
.the-input{
border:none;
text-align:center;
}
<div class="main">
<span style="font-size:24px;">$</span>
<div class="this-should-be-input">
12345
</div>
</div>
<div class="main">
<input class="this-should-be-input the-input" value="$12345"/>
</div>
But if you wanted it there permanently you wouldn't be able to center your input field without javascript
Your code is center aligning both the $ sign and the text input. The problem is that you have not specified any width for the input field. You can fix this by specifying the width to the input field.
Hope it helps!
.main{
display:flex;
align-items:center;
justify-content:center;
}
.this-should-be-input{
font-size:36px;
}
.the-input{
border:none;
text-align:center;
width:24%;
}
<div class="main">
<span style="font-size:24px;">$</span>
<div class="this-should-be-input">
12345
</div>
</div>
<div class="main">
<span style="font-size:24px;">$</span>
<input class="this-should-be-input the-input" value="12345"/>
</div>
hi i have small problem when i resize my window i get at last BOOTSTRAP BREAKPOINRT wraping DIV is there any fix for it ? adding ROW doesnt helps =\
LIVE Prewiew : http://nekonomagic.sk/stylmejker/pages/uvod.php
Prewiew
HTML Code :
<div class="col-md-12" id="no-wrap">
<div class="row col-md-1" id="slider-span">
<span class="fa fa-arrow-left"></span>
<span class="fa fa-arrow-right"></span>
</div>
<div class="col-md-4" id="slider-pagin">
<ul class="pagination">
<li>01</li>
<li>02</li>
<li>03</li>
</ul>
</div>
</div>
For an instant solution, you can try this media query.
#media only screen and (max-width:990px){
#no-wrap {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
#slider-pagin{
top:0;
}
}
I am trying to create a simple menu using the following html setup:
<div class="container">
<div class="container-cell">
<a href="play.html">
<div class="menu-option no-margintop">
<div class="play-icon">
<span class="helper"></span><img src="./img/icon_1.png"/>
</div>
<div class="menu-text"><span>Play</span></div>
</div>
</a>
<a href="index.html">
<div class="menu-option">
<div class="play-icon">
<span class="helper"></span><img src="./img/icon_3.png"/>
</div>
<div class="menu-text"><span>Highscore</span></div>
</div>
</a>
<a href="index.html">
<div class="menu-option">
<div class="play-icon">
<span class="helper"></span><img src="./img/icon_2.png"/>
</div>
<div class="menu-text"><span>FAQ</span></div>
</div>
</a>
</div>
</div>
In the process of creating this, I made a switch from hard pixels to percentages. Whereas the pixel version of setting hights works, it does not seem to work in percentages. The hight for one particular class, menu-option, does not seem to get picked up by the browser.
I have been searching for a while, and the only solutions I came across, was setting a height to both the body and html (100%). I have also set a height to any of the container-elements.
See css below:
html, body{
height:100%;
}
.container {
display:table;
width:100%;
height:70%;
}
.container-cell {
display:table-cell;
vertical-align: middle;
height:100%;
}
.menu-option{
width:90%;
margin-left:5%;
border-radius:10px;
background-color:rgba(17,23,28,0.2);
height:6.94%;
margin-top:5%;
font-size:150%;
}
Why is the browser not picking up on the height in percentage and how can make it use the height in percentage?
Add display: inline-block; to your menu-option class for the height property to work. Something like this:
.menu-option{
display: inline-block;
width:90%;
margin-left:5%;
border-radius:10px;
background-color:rgba(17,23,28,0.2);
height:6.94%;
margin-top:5%;
font-size:150%;
}
Here's a jsfiddle of the above: https://jsfiddle.net/AndrewL32/e0d8my79/17/