This issue really was causing me troubles.
I have a circle. That circle is a square with border-radius: 50%. It's also flex.
The first line contains an icon, the second line has text.
My problem is that they have large indentation between, I'd like them to be closer to each other. I can't come up with an idea how to fix this.
JSFiddle
HTML
<ion-content has-header="false">
<div class="dashboard-grey-menu">
<div class="flex row no-padding">
<div class="col">
<div class="circle" ui-sref='clients'>
<div class="ion-ionic"></div>
<div>Second line</div>
</div>
</div>
</div>
</div>
</ion-content>
CSS
.dashboard-grey-menu {
height: 23vh;
background-color: #959595;
}
.circle {
border-radius: 50%;
width: 18vw;
height: 18vh;
background-color: #D0D0D0;
font-size: 1em;
font-weight: 900;
margin: auto;
display: flex;
align-items: center;
justify-content: space-around;
flex-flow: column;
}
How would you solve this? Thanks in advance!
Solution 1: add style="padding-bottom:8vh to your second div
Solution 2: delete justify-content: space-around; from .circle in css because main reason for this space is that one. U should do it with using padding or margin css commands with using vh to not lose responsivilty
Related
I am pretty new to React.js and flexbox, and I currently have a flexbox with both an h2 and a button that I want to center. Unfortunately, even when I put justify-content: center, margin: auto, and text-align center, the formatting is still now what I'm looking for. I also know that there must be something that I am missing, but I just don't know what right now. Any suggestions would be greatly appreciated.
<header className={styles.header}>
<div className={styles.spacing}></div>
<div className={styles.logoaccount}>
<img></img>
</div>
<div className={styles.spacing}></div>
<div className={styles.searchsearch}>
<h2>Japanese</h2>
<button>Search</button>
</div>
<div className={styles.spacing}></div>
<div className={styles.spacing}></div>
<div className={styles.spacing}></div>
<div className={styles.spacing}></div>
<div className={styles.filters}>
<button className="location">Location</button>
<button className="food-type">Food-type</button>
<button className="rate">Rate</button>
<button className="apply-filters">Apply-Filters</button>
</div>
*{
margin: 0;
padding: 0;
}
.header{
text-align: center;
}
.logoaccount{
width: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
.logoaccount > button{
border-radius: 5px;
}
.filters{
width: 75%;
display: flex;
margin: auto;
justify-content: space-between;
}
.filters > button{
width: 15%;
}
.searchsearch{
width: 50%;
display: flex;
align-items: center;
justify-content: space-between;
margin: auto;
}
.spacing{
height: 20px;
}
This is what I get:
however, I want the second line containing Japanese and "Search" to be centered. I tried all over to look for the solution but I unfortunately couldn't find anything. thanks so much!
Edit: background color for clarification.
Have you tried inspecting the page and using the Select Page Item tool (Ctrl+Shift+C) to see if the problem is visible?. If not, just like you did with .filters > button, try adding the width: 15% style (or try other percentages, like 50%) to the .searchsearch > button. Otherwise, maybe using the filters style instead of the searchsearch one in the div's className changes something that makes it work.
I just came across this problem. Everything seems ok, but I don't understand where is the problem. Centering and aligning items at the same time are not good?
Only I wanted to write down 3 div in the column direction. I can not change the structure because I will try something with this structure.
This is how does it look like. https://codepen.io/vortovor/pen/ExXZMzR
.col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: pink;
}
.col>div {
background: #ddd;
<div class="row">
<div class="col">
<div class="top">
<div>Hello</div>
<div>I'm</div>
</div>
<div class="bottom">
<div>Here</div>
</div>
</div>
</div>
You are missing the height property in your .col add to your code
.col{
height: 500px;
border: 1px black solid;
}
so can see that is working fine:
.col {
height: 500px;
border: 1px black solid;
}
/* orginal CSS */
.col {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<div class="row">
<div class="col">
<div class="top">
<div>Hello</div>
<div>I'm</div>
</div>
<div class="bottom">
<div>Here</div>
</div>
</div>
</div>
the code is fine, what happens is the size of the content of your divs.
if you add a class to all your word divs
.a {
text-align: center;
border: 1px red solid;
width: 100px;
}
at the moment you have the width of each word which are different and you alignment is centre, therefore it looks like:
one
onelong
oneme
I am trying to achieve something like this
Circle with letters starts at starting of first div and second div with a line separater in between. Here the length of line should be calculated based on space in middle of two divs. I tried couple of ways but no luck. Please suggest me an approach to do this.
Update:
I tried #Vadim answer, but in my case separater length should be dynamic, not static, and div's are like this:
<div class="container">
<div class="first-div">
<div class="letter">Q</div>
<div>another div</div>
</div>
<div class="second-div">
<div class="letter">A</div>
<div>another div</div>
</div>
</div>
I would like to draw vertical line between letters. Height of line should be dynamic according to inner divs height.
You can use flexbox to achieve desired layout:
.container {
background-color: #ccc;
padding: 15px;
/* align items in one column and take space defined by content */
/* this is used for centering separator */
display: inline-flex;
flex-direction: column;
}
.letter {
width: 25px;
height: 25px;
background-color: #fff;
border-radius: 50%;
/* styles for text centering */
display: flex;
justify-content: center;
align-items: center;
}
.separator {
width: 5px;
height: 50px;
border-radius: 3px;
background-color: #fff;
margin-top: 5px;
margin-bottom: 5px;
/* center horizontally */
align-self: center;
}
<div class="container">
<div class="letter">Q</div>
<div class="separator"></div>
<div class="letter">A</div>
</div>
i have already tried many thing to center a span Element (which contains couple of DIVs) in a wrapper DIV (in this case the soccerField DIV)...
HTML structure looks like this:
<div id="soccerField">
<span id="defendLine">
<div>player 1</div>
<div>player 2</div>
<div>player 3</div>
<div>player 4</div>
</span>
<div>
CSS looks like this:
#field{
padding: 0%;
min-width: 250px;
min-height: 1000px;
max-width: 800px;
position: relative;
text-align: center
}
#defendLine{
display: inline-block;
}
at the moment it looks like:
at the end it should looks like:
but this result i only get when I am using this code:
#defendLine{
position: absolute;
left:59px
}
but this is not the right way I think becasue when I have only 3 players or 5 players at my DefendLine, i also have to give some "left: X" values. But i want to make it dynamically. >> doesnt matter how much players, always center the span element, independentley how much players my includes.
I have already check these articles which helps other, but in this case. I couldnt help myself :(
CSS How to center a div horizontally
How do you easily horizontally center a <div> using CSS?
I would be really happy if anyone could give me a hint!
Edit:
I have created a fiddle, i tried all solutions out. I think something else is the reason for my problem :(
https://jsfiddle.net/rztad75y/2/
Here is a JSFiddle with the solution and I'll explain some keys of how to achieve it:
1) I use flexbox
#field {
/* I skip properties that do not change */
display: flex;
justify-content: center; /* here we just put the only child div to the center */
}
I changed #defendLine to .defendLineSE just to make sure that it's not overriden elsewhere. (that's why your code could not work - just change that back)
.defendLineSE {
width: 400px;
display: flex;
justify-content: space-between;
}
2) Note that we need to have width. This width is a sum of #defendie-s width and spaces between them (justify-content: space-between;)
3) I removed all position: absolute in your #defendie because they destroy our flexbox (you don't need to use left: 387px; as well)
tip1: I believe you will find usefull this flexbox-cheatsheet
tip2: Since we use justify-content: space-between; you may not need such classes like .firstColumn and others
tip3: change #defendLine to .anyLine, remove width: 400px;, add margin to your .defendie-s - you'll have universal solution for any line with any number of players
using a <span> tag is a bad practice. instead, change it to a <div> like this:
HTML
<div id="soccerField">
<div id="defendLine">
<div>player 1</div>
<div>player 2</div>
<div>player 3</div>
<div>player 4</div>
</div>
<div>
CSS
#defendLine{
width: 90%;
margin: 0 auto;
}
Edit
if you'd like to center the content of the div itself, set text-align:center or simply use flexbox:
display:flex;
justify-content: center;
align-items: center;
more info could be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could use transform: translateX() like this..
position: absolute;
left: 50%;
transform: translateX(-50%);
#field{
padding: 0;
min-width: 250px;
min-height: 1000px;
max-width: 800px;
position: relative;
text-align: center
}
#defendLine{
display: flex;
position: absolute;
top: 0%; left: 50%;
transform: translateX(-50%);
}
#defendLine div {
display: flex;
flex-basis: 20%;
}
<div id="soccerField">
<span id="defendLine">
<div>player 1</div>
<div>player 2</div>
<div>player 3</div>
<div>player 4</div>
</span>
<div>
It works vertically as well..
top: 50%; left: 50%;
transform: translateY(-50%) translateX(-50%);
You were on the right track. You can center elements using text-align: center
#field{
padding: 0%;
min-width: 250px;
min-height: 1000px;
max-width: 800px;
position: relative;
/*text-align: center*/
}
#defendLine{
text-align: center;
display: block;/* This is a span, you have to make it a block*/
}
#defendLine div{
display: inline-block;
}
<div id="soccerField">
<span id="defendLine">
<div>player 1</div>
<div>player 2</div>
<div>player 3</div>
<div>player 4</div>
</span>
<div>
Use display: flex for the parent div, and justify-content: center to center items inside on the horizontal axis, and align-items: center to center them vertically.
Flex boxes are a real helper in cases like this.
I have a project where I want to change some circle elements into hyperlinks by wrapping them in an <a href>. The problem is, I lose the styling that I had previously applied after I wrap the html div in the <a> tag. I am having trouble finding a solution after adding the <a> tag in the css.
Here is a Codepen I have created of a draft project. Try wrapping a .circle div in an <a> tag:
CodePen
In case CodePen is down
.wrapper {
width: 100%;
}
.wrapper .first {
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
max-width: 1222px;
}
.wrapper .first .circle {
width: 100px;
height: 100px;
overflow: hidden;
text-align: center;
margin-right: 20px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
background: #FF9E9D;
border-radius: 50%;
border-style: solid;
border-color: #FF9E9D;
transition: all 0.4s ease-in-out;
}
<div class="wrapper">
<div class="first">
<div class="circle">
<h5>MD</h5>
</div>
</div>
</div>
Thanks, any help is greatly appreciated.
since you want the entire div to be a link why not give the a tag a class of that style. For example
<a class="first" href="your link"></a>
Note that ".first" can be any of the classes you want your link to be or you want your user to click on to go to that link
it works fine while i do it in that code pen
<div class="circle"><h5>MD</h5></div>
<div class="circle"><h5>MD</h5></div>
<div class="circle"><h5>MD</h5></div>
<div class="circle"><h5>MD</h5></div>
<div class="circle"><h5>MD</h5></div>
this is what i done
or
<div class="circle"><h5>MD</h5></div>
is also looks fine