CSS: Element zur Mitte des Floats hinzufügen

Question

Ich möchte ein Element zur Mitte des Panels hinzufügen. Ich verwende float: right und float:left, um das Panel zu teilen. Ich benutze hier keinen Bootstrap.

Ich verwendete clear: both; und margin: 0 auto; Stile und es funktioniert nicht für mich. Gibt es eine Möglichkeit, das zu tun? Ich habe ein Beispielbild beigefügt, was ich will.

Jede Hilfe hoch schätzen. Danke,

Answer 1

Versuchen Sie, dies könnte Ihnen helfen.

Sie einfach Breite 1/3 verwenden können und float links machen es

und text-align: center ist Text

Grund zum Zentrum Struktur

.col{ 
 
width: 33.33%; 
 
text-align: center; 
 

 
} 
 

 
.left{ 
 
    float: left; 
 
    }

<div class="col left"> 
 
something 
 
</div> 
 
<div class="col left"> 
 
something is here!! 
 
</div> 
 
<div class="col left"> 
 
something 
 
</div>

Ihr Entwurf

.col{ 
 
width: 32%; 
 
height: 300px; 
 
text-align: center; 
 
margin-left: .5%; 
 
margin-right: .5%; 
 

 
} 
 

 
.left{ 
 
    float: left; 
 
    } 
 

 
.black{ 
 
background-color: black; 
 
color: white; 
 
} 
 

 
.red{ 
 
background-color: red; 
 
}

<div class="col left black"> 
 
something 
 
</div> 
 
<div class="col left red"> 
 
something is here!! 
 
</div> 
 
<div class="col left black"> 
 
something 
 
</div>

Answer 2

Es gibt nichts float:center in CSS nennt man muss nur Schwimmer nach links oder rechts verwenden und es ist sehr wichtig, dass Sie Machen Sie den HTML-Code in der Baumstruktur.

Hier ist die Arbeit codepen. Der Code ist unten angegeben.

<div class="container"> 
     <div class="row"> 
      <div class="col20 black"> 
        Float : left. 
      </div> 
      <div class="col60 red"> 
        Added Something here. 
      </div> 
      <div class="col20 black"> 
        Float : Right. 
      </div> 
     </div> 
</div> 



*{ 
     box-sizing : border-box; 
} 
.container{ 
     width:800px; 
     margin:0 auto; 
} 
.row{ 
     width:100%; 
     text-align: center; 
} 
.row:after{ 
     clear:both; 
     content:""; 
     display:block; 
} 
.row:before{ 
     clear:both; 
     content:""; 
     display:block; 
} 
.col20{ 
     width:20%; 
     float:left; 
     height:200px; 
} 
.col60{ 
     width:60%; 
     float:left; 
     height:200px; 
} 
.black{ 
     background:#000; 
     color:#fff; 
} 
.red{ 
     background:red; 
     Color:#fff; 
} 

Answer 3

Eine weitere Option ist, wenn diese über die gesamte Breite und Höhe der Mutter Aufnahme einfach Flexbox Layout verwenden:

.parent { display: flex; flex-direction: row; } .parent > * { flex: 1 1 auto; /* Or you can specify specific widths. I would suggest one being 1 1 auto though. */ }

<div class="parent"> <div class="left"></div> <div class="middle"></></div> <div class="right"></></div> </div>