layout - Center Responsive CSS circle with centered text inside of a parent DIV -


I have recently started working on the web layout for css Which I intend to plug in in Wordpress Theme .

I'm just focusing on two things - 4 buttons similar-radius circles, and a fully responsive layout.

I found a great way to create a responsible board with centered text:

Only one issue here should stand inside the parent DIV and take it to the center going. Absolute position does not work, and I do not think it can, because the height of the button is unknown.

I am currently playing with CSS Conversion and it is by far the closest one. I have implemented the vertical center class called the different parts centered here, as seen here.

CSS:

  .circle {margin-left: auto; Margin-right: auto; Limit-Radius: 50%; Width: 100%; Status: Relative; Background color: purple; }. Vinegar border (range: 1 px solid black;) .circle: {content: ""; display area; padding-top: 100%;} .circle-inner {status: full; top: 0; left: 0; bottom: 0; Right: 0; Text align: center;} .nav-text {margin: auto; position: full; top: 0; left: 0; bottom: 0; right: 0; height: 1 am; line-height : 1 AM; font size: 1em;} .center {status: relative; top: 50%; conversion: translate y (50%); conversion-style: protection-3d;}   < P> HTML:  
  & lt; div id = "button4" class = "buttoncontainer centerme" & gt; & lt ;! - start button4 - & gt; & Lt; div class = "circle circle-boundary" & gt; & lt ;! - Start Circle creation - & gt; & lt; div class = "circle-inner" & gt; div class = "nav- Lt; li & gt; & lt; a href = "#" & gt; four & lt; / a & gt; & lt; / li & gt; & lt; / div & gt; 

Sorry if this problem has already been posted. Thanks in advance

contains the entire layout

I know 2 ways to do vertical things:

1.vertiacl-align: middle (which applies to inline elements)

2. Work: Completed; Top: 0; Bottom: 0; Margins: Auto;

But none of these can apply to a float division.

I recommend that you change your HTML code.

Comments

Popular posts from this blog

ios - Adding an SKSpriteNode to SKScene from a child SKSpriteNode -

Matlab transpose a table vector -

c# - Textbox not clickable but editable -