zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 2 Divs im Container mittig

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.05.2018, 21:15
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 86
seerose befindet sich auf einem aufstrebenden Ast
Standard 2 Divs im Container mittig

Ich habe ein Div – Container,
drinnen sind 2 Content Divs nebeneinander, 1. Div = Bild 2. Div =Text
Mit display: table-cell; vertical-align: middle erreiche ich im Container
das der 1. Content Divs Horizontal mittig sitzt. (oben/unten gleicher Abstand)
Aber der 2. Div lässt sich davon nicht beeindrucken, wie erreiche ich es,
das beide mittig sitzen?


HTML-Code:
<style>
DIV.container {
		border:2px solid #00ff00;
		width:220px;
		    min-height: 250em;
		   height:210px;
    display: table-cell;
    vertical-align: middle 
    }
.innen{
	background:#ee0000;
	float:left;
	
	
}

</style>


 <DIV class='container'>
 
 <div class='innen'>   
 <span  title='$datum_titel'><center>Sommer</center></span>  
   	<img class='im' style=' width:80px; height:100px'     src='https://xhtmlforum.de/images/x_buttons/newthread.gif'>
 </div>
 
 <div class='innen' style='margin-left:8px'>  
  Beschreibung...
</div>
 
 
</DIV>

Geändert von seerose (20.05.2018 um 22:00 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.05.2018, 21:50
Benutzerbild von hemfrie
Administrator
XHTMLforum-Kenner
 
Registriert seit: 18.12.2003
Ort: Düsseldorf
Beiträge: 2.776
hemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannthemfrie ist jedem bekannt
Standard

Für sowas nutzt man heute am Besten die flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ist am Anfang vielleicht etwas ungewohnt aber die Möglichkeiten die man später damit hat sind einfach zu gut. Das gleiche gilt auch für css grid.

https://css-tricks.com/snippets/css/...te-guide-grid/

Code:
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #00ff00;
  width: 220px;
  height: 220px;
}
.innen {
  background: #ee0000;
}
Wenn die beiden .innen horizontal links stehen sollen, dann musst Du ...

justify-content: flex-start;

nehmen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.05.2018, 21:11
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.10.2014
Beiträge: 86
seerose befindet sich auf einem aufstrebenden Ast
Standard Flexbox

Hi hemfrie,
da quält man sich so lange ab, und braucht nur mal was neues lernen.
Danke für den Flexbox Typ
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Anfängerfrage: Zentrierung in Galerie und Border-Problem goldbeere CSS 3 04.11.2013 19:07
DIVs wollen nicht in Container Echnotron CSS 4 22.02.2012 08:46
Fullscreen Container mit internen divs purewhite (X)HTML 1 02.11.2009 15:24
Divs nebeneinander, aber mittig RomanM CSS 2 24.10.2007 06:32
Div Container mittig positionieren donhoolio CSS 3 05.07.2005 20:41


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:32 Uhr.